"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";

const brandColors: Record<
  string,
  { primary: string; light: string; dark: string }
> = {
  p4l: { primary: "#E30613", light: "#FF1A27", dark: "#C00510" },
  etisalat: { primary: "#E30613", light: "#FF1A27", dark: "#C00510" },
  "e&": { primary: "#E30613", light: "#FF1A27", dark: "#C00510" },
};

export default function LayoutWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname() || "";

  useEffect(() => {
    const segments = pathname.split("/").filter(Boolean);
    const brandKey =
      segments[0] === "devicetest"
        ? decodeURIComponent(segments[1] || "").toLowerCase()
        : "p4l";
    const brand = brandColors[brandKey] || brandColors.p4l;
    const root = document.documentElement;

    root.style.setProperty("--brand-primary", brand.primary);
    root.style.setProperty("--brand-primary-light", brand.light);
    root.style.setProperty("--brand-primary-dark", brand.dark);
  }, [pathname]);

  return children;
}