import { Sun, Moon } from "lucide-react"
import { useEffect, useState } from "react"

function getStoredTheme(): boolean {
  if (typeof window === "undefined") return false
  try {
    const stored = localStorage.getItem("frasa_theme")
    if (stored) return stored === "dark"
    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
  } catch {
    return false
  }
}

export default function DarkModeToggle() {
  const [dark, setDark] = useState(getStoredTheme)

  useEffect(() => {
    document.documentElement.classList.toggle("dark", dark)
    try {
      localStorage.setItem("frasa_theme", dark ? "dark" : "light")
    } catch {
      // localStorage not available (test env)
    }
  }, [dark])

  return (
    <button onClick={() => setDark(!dark)} className="rounded-lg p-2 text-[#64748B] hover:bg-[#F1F5F9] dark:text-[#94A3B8] dark:hover:bg-[#1E293B]" aria-label="Cambiar tema">
      {dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
    </button>
  )
}