"use client";

import { useTheme } from "next-themes";
import { MoonIcon } from "./icon/moon-icon";
import { SunIcon } from "./icon/sun-icon";

export function ToggleThemeButton(): JSX.Element {
  const { theme, setTheme } = useTheme();

  return (
    <button className="p-2 rounded-lg" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? <SunIcon /> : <MoonIcon color="#000" />}
    </button>
  );
}