"use client";

import { useEffect } from "react";

/**
 * Applies the stored theme to <html> immediately on mount (client only).
 * Must be rendered inside the layout BEFORE the page content.
 */
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    try {
      const raw = localStorage.getItem("capakraken_theme");
      if (!raw) return;
      const prefs = JSON.parse(raw) as { mode?: string; accent?: string };
      const html = document.documentElement;
      if (prefs.mode === "dark") html.classList.add("dark");
      else html.classList.remove("dark");
      if (prefs.accent) html.setAttribute("data-accent", prefs.accent);
    } catch {}
  }, []);

  return <>{children}</>;
}
