"use client";

import { useEffect } from "react";
import { useGlobalSettings } from "./global-settings-provider";

export function SiteCustomCss() {
  const { settings } = useGlobalSettings();

  useEffect(() => {
    if (!settings) return;

    // Remove any existing custom style
    const existingStyle = document.getElementById("global-custom-css");
    if (existingStyle) {
      existingStyle.remove();
    }

    // Add custom CSS if present
    if (settings.siteSettings?.custom_css) {
      const style = document.createElement("style");
      style.id = "global-custom-css";
      style.textContent = settings.siteSettings.custom_css;
      document.head.appendChild(style);
    }

    // Cleanup
    return () => {
      if (document.getElementById("global-custom-css")) {
        document.getElementById("global-custom-css")?.remove();
      }
    };
  }, [settings?.siteSettings?.custom_css]);

  return null;
}