"use client";
import { useEffect, useState } from "react";
import { Moon, Sun, Monitor } from "lucide-react";
type Mode = "light" | "dark" | "system";
export function ThemeToggle() {
  const [mode, setMode] = useState<Mode>("system");
  useEffect(() => { setMode((localStorage.getItem("theme") as Mode) || "system"); }, []);
  const apply = (m: Mode) => {
    setMode(m); localStorage.setItem("theme", m);
    const dark = m === "dark" || (m === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
    document.documentElement.classList.toggle("dark", dark);
  };
  const next: Record<Mode, Mode> = { system: "light", light: "dark", dark: "system" };
  const Icon = mode === "dark" ? Moon : mode === "light" ? Sun : Monitor;
  return (
    <button type="button" onClick={() => apply(next[mode])} className="btn-ghost h-9 w-9 !p-0" aria-label={`Theme: ${mode}. Switch theme`} title={`Theme: ${mode}`}>
      <Icon className="h-4 w-4" aria-hidden />
    </button>
  );
}