import { createContext, useContext } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const theme = {
    colors: {
      primary: {
        main: 'text-primary-600',
        hover: 'hover:text-primary-700',
        bg: 'bg-primary-600',
        bgHover: 'hover:bg-primary-700',
      },
      neutral: {
        text: 'text-neutral-600',
        heading: 'text-neutral-900',
        bg: 'bg-neutral-50',
        border: 'border-neutral-200',
      },
      accent: {
        main: 'text-accent-600',
        bg: 'bg-accent-600',
        light: 'bg-accent-50',
      },
    },
    typography: {
      h1: 'text-4xl font-display font-bold tracking-tight',
      h2: 'text-2xl font-display font-semibold',
      h3: 'text-xl font-display font-semibold',
      body: 'text-base text-neutral-600',
      small: 'text-sm text-neutral-500',
    },
    spacing: {
      section: 'py-12 md:py-20',
      container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
    },
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);