import { useState, useEffect } from "react";

export function useHtmlThemeAttr(): string {
  const [theme, setTheme] = useState<string>(() =>
    document.documentElement.getAttribute("data-theme") || "light"
  );

  useEffect(() => {
    const handler = (e: CustomEvent<string>) => setTheme(e.detail);
    document.addEventListener("set-theme", handler as EventListener);
    return () => document.removeEventListener("set-theme", handler as EventListener);
  }, []);

  return theme;
}