"use client";

type BrandColors = {
  primaryColor?: string | null;
  secondaryColor?: string | null;
  bgColor?: string | null;
  textColor?: string | null;
};

function buildCssBlock({
  primaryColor,
  secondaryColor,
  bgColor,
  textColor,
}: BrandColors): string {
  const declarations: string[] = [];
  if (primaryColor) declarations.push(`--brand-primary: ${primaryColor};`);
  if (secondaryColor) declarations.push(`--brand-secondary: ${secondaryColor};`);
  if (bgColor) declarations.push(`--brand-bg: ${bgColor};`);
  if (textColor) declarations.push(`--brand-text: ${textColor};`);
  if (declarations.length === 0) return "";
  return `:root{${declarations.join("")}}`;
}

export default function BrandStylesProvider(props: BrandColors) {
  const css = buildCssBlock(props);
  if (!css) return null;
  // Render an inline <style> tag so the brand tokens are applied to :root
  // on every render. No useEffect needed — the DOM mutation is replaced by
  // a declarative style element that React reconciles on each prop change.
  return <style data-brand-styles dangerouslySetInnerHTML={{ __html: css }} />;
}