import { useTheme } from "../context/ThemeContext";
import { Sun, Moon } from "./icons";

export function ThemeToggle() {
  const { theme, toggle } = useTheme();
  const dark = theme === "dark";

  return (
    <button
      onClick={toggle}
      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
      className="press focusable grid h-9 w-9 place-items-center rounded-lg text-muted hover:bg-surface-2 hover:text-ink"
    >
      <span className="swap">
        <Sun size={17} data-off={dark} />
        <Moon size={17} data-off={!dark} />
      </span>
    </button>
  );
}