'use client';

import React, { createContext, useContext, ReactNode } from 'react';
import { Theme } from './Theme';
import { defaultTheme } from './themes/default';

interface ThemeContextType {
  theme: Theme;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  // For now, we only have the default theme.
  // In the future, this could be driven by state, cookies, or user preferences.
  const value = {
    theme: defaultTheme,
  };

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

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}
