"use client";

import { createContext, useContext, useMemo, type CSSProperties, type ReactNode } from "react";
import { getCatalogThemeDefinition } from "@/themes/registry";
import type { CatalogThemeDefinition } from "@/themes/types";

const CatalogThemeContext = createContext<CatalogThemeDefinition>(getCatalogThemeDefinition("default"));

export function CatalogThemeProvider({
  theme,
  children,
}: {
  theme?: string | null;
  children: ReactNode;
}) {
  const definition = useMemo(() => getCatalogThemeDefinition(theme), [theme]);

  return (
    <CatalogThemeContext.Provider value={definition}>
      <div
        data-catalog-theme={definition.id}
        className="catalog-theme-shell"
        style={definition.cssVariables as CSSProperties}
      >
        {children}
      </div>
    </CatalogThemeContext.Provider>
  );
}

export function useCatalogTheme() {
  return useContext(CatalogThemeContext);
}