"use client";
import { useSyncExternalStore } from "react";
import { Button } from "@heroui/react";
import { Moon, Sun } from "lucide-react";
function subscribe(listener: () => void) {
  window.addEventListener("neo-theme-change", listener);
  const sync = (event: StorageEvent) => {
    if (event.key === "neo-theme") {
      applyTheme(event.newValue === "dark");
      listener();
    }
  };
  window.addEventListener("storage", sync);
  return () => {
    window.removeEventListener("neo-theme-change", listener);
    window.removeEventListener("storage", sync);
  };
}
function applyTheme(dark: boolean) {
  document.documentElement.classList.toggle("dark", dark);
  document.documentElement.dataset.theme = dark ? "dark" : "light";
  document.documentElement.style.colorScheme = dark ? "dark" : "light";
}
export default function ThemeToggle() {
  const dark = useSyncExternalStore(
    subscribe,
    () => document.documentElement.dataset.theme === "dark",
    () => false,
  );
  return (
    <Button
      variant="ghost"
      isIconOnly
      aria-label={dark ? "Activar tema claro" : "Activar tema oscuro"}
      className="size-9 shrink-0 rounded-full text-muted"
      onPress={() => {
        const nextDark = document.documentElement.dataset.theme !== "dark";
        applyTheme(nextDark);
        try {
          localStorage.setItem("neo-theme", nextDark ? "dark" : "light");
        } catch {}
        window.dispatchEvent(new Event("neo-theme-change"));
      }}
    >
      {dark ? <Sun className="size-[18px]" /> : <Moon className="size-[18px]" />}
    </Button>
  );
}