import { jsxs, jsx } from "react/jsx-runtime";
import { Sun, Moon } from "lucide-react";
import { useState, useEffect } from "react";
const STORAGE_KEY = "pergam-theme";
function applyTheme(theme) {
  document.documentElement.classList.toggle("dark", theme === "dark");
}
function ThemeToggle() {
  const [theme, setTheme] = useState("dark");
  useEffect(() => {
    const stored = window.localStorage.getItem(STORAGE_KEY);
    const nextTheme = stored === "light" ? "light" : "dark";
    setTheme(nextTheme);
    applyTheme(nextTheme);
  }, []);
  const toggleTheme = () => {
    const nextTheme = theme === "dark" ? "light" : "dark";
    setTheme(nextTheme);
    window.localStorage.setItem(STORAGE_KEY, nextTheme);
    applyTheme(nextTheme);
  };
  return /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      onClick: toggleTheme,
      className: "group relative inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-card/80 text-foreground shadow-sm backdrop-blur-xl transition hover:-translate-y-0.5 hover:border-primary/40",
      "aria-label": theme === "dark" ? "Aktifkan light mode" : "Aktifkan dark mode",
      children: [
        /* @__PURE__ */ jsx(Sun, { className: "absolute h-4 w-4 transition duration-300 group-hover:rotate-12 dark:-translate-y-8 dark:opacity-0" }),
        /* @__PURE__ */ jsx(Moon, { className: "absolute h-4 w-4 translate-y-8 opacity-0 transition duration-300 group-hover:-rotate-12 dark:translate-y-0 dark:opacity-100" })
      ]
    }
  );
}
export {
  ThemeToggle as T
};
