"use client";

/**
 * Applies the promo appearance theme to a subtree.
 *
 * Exists so every promo page gets the same treatment without each one repeating
 * the hook, the provider and the background wrapper. Mounting it more than once
 * is safe — the variable writes are reference-counted (see `usePromoAppearance`),
 * which matters because the promo layout and the deeper campaign routes are
 * separate route trees.
 *
 * Deliberately not applied to the KCGM dashboard: that page ships its own
 * self-contained styling, and the accent variables would fight it.
 */

import type { ReactNode } from "react";
import { PromoThemeProvider, usePromoAppearance } from "./appearance";

export function PromoThemeShell({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  const appearance = usePromoAppearance();
  return (
    <PromoThemeProvider theme={appearance.theme}>
      <div
        {...appearance.surfaceProps}
        className={
          className
            ? `${appearance.surfaceProps.className} ${className}`
            : appearance.surfaceProps.className
        }
      >
        {children}
      </div>
    </PromoThemeProvider>
  );
}