'use client';
import { createContext, useContext, ReactNode } from 'react';
import type { Store, StoreTheme } from '@/types';

interface StoreContextValue {
  store: Store;
  theme: StoreTheme;
}

const StoreContext = createContext<StoreContextValue | null>(null);

/**
 * Injeta as cores do tema como CSS custom properties, fazendo o tema
 * alterar visualmente toda a loja pública (requisito do projeto).
 */
export function StoreThemeProvider({
  store,
  theme,
  children,
}: {
  store: Store;
  theme: StoreTheme;
  children: ReactNode;
}) {
  const style = {
    '--store-primary': theme.primaryColor,
    '--store-secondary': theme.secondaryColor,
    '--store-button': theme.buttonColor,
  } as React.CSSProperties;

  return (
    <StoreContext.Provider value={{ store, theme }}>
      <div style={style} className="min-h-screen bg-white">
        {children}
      </div>
    </StoreContext.Provider>
  );
}

export function useStoreContext() {
  const ctx = useContext(StoreContext);
  if (!ctx) throw new Error('useStoreContext deve estar dentro de <StoreThemeProvider>');
  return ctx;
}