import { FiMoon, FiSun } from "react-icons/fi";
import { useTheme } from "@/themecontext";

import styles from "./theme-toggle.module.scss";

export default function ThemeToggle() {
  const { isDark, toggleTheme } = useTheme();

  return (
    <button
      type="button"
      onClick={toggleTheme}
      className={styles.toggle}
      aria-label="Toggle theme"
    >
      <div
        className={`${styles.thumb} ${
          isDark ? styles.dark : styles.light
        }`}
      >
        {isDark ? <FiMoon /> : <FiSun />}
      </div>
    </button>
  );
}