"use client";

import { ThemeProvider, useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
import { useSyncExternalStore, type ReactNode } from "react";

const noop = (): (() => void) => () => {};
/** true after hydration, false during SSR — without a setState-in-effect. */
export function useMounted(): boolean {
  return useSyncExternalStore(noop, () => true, () => false);
}

export function Providers({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
      {children}
    </ThemeProvider>
  );
}

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  const mounted = useMounted();
  const dark = mounted ? resolvedTheme === "dark" : true;
  return (
    <button type="button" aria-label="Toggle theme" onClick={() => setTheme(dark ? "light" : "dark")} className="inline-flex size-8 items-center justify-center rounded-md border border-line bg-panel text-fg-muted hover:text-fg">
      {dark ? <Sun className="size-4" /> : <Moon className="size-4" />}
    </button>
  );
}