"use client";

import { useEffect, useState } from "react";

/**
 * Static fallback for BRAND_600 — used as the initial value before the
 * client can read the live CSS custom property (see useBrandColorVar below),
 * and as the SSR/first-paint value. Keep in sync with globals.css's
 * `--brand-600` default.
 */
const BRAND_600_FALLBACK = "#4F46E5";

/**
 * Reads a live brand CSS custom property (e.g. `--brand-600`) off the
 * document root. Needed by the rare spot that requires a literal color value
 * instead of a Tailwind class (SVG stroke/fill, canvas, etc.) — Tailwind
 * classes like `text-brand-600` pick up the admin-configurable primary color
 * automatically via CSS variables (see tailwind.config.js), but a literal
 * hex string has to be read explicitly since it can't reference `var()`.
 */
export function useBrandColorVar(cssVar: string, fallback: string = BRAND_600_FALLBACK): string {
  const [color, setColor] = useState(fallback);

  useEffect(() => {
    const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
    if (value) setColor(value);
  }, [cssVar]);

  return color;
}