"use client";

import { Moon, Sun } from "lucide-react";
import { ThemeProvider, useTheme } from "next-themes";
import { useSyncExternalStore, type ReactNode } from "react";
import { IconButton } from "@/components/ui/button";

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="light" enableSystem disableTransitionOnChange>
      {children}
    </ThemeProvider>
  );
}

export function ThemeToggle({ className }: { className?: string }) {
  const { resolvedTheme, setTheme } = useTheme();
  const mounted = useMounted();
  const dark = mounted ? resolvedTheme === "dark" : false;
  return (
    <IconButton label={dark ? "Switch to light theme" : "Switch to dark theme"} variant="ghost" onClick={() => setTheme(dark ? "light" : "dark")} className={className}>
      {dark ? <Sun className="size-4" strokeWidth={1.75} /> : <Moon className="size-4" strokeWidth={1.75} />}
    </IconButton>
  );
}