import { useState, useEffect } from 'react';
import { applyTheme, getInitialTheme } from '../utils/theme';

export const useTheme = () => {
  const [theme, setTheme] = useState('light');

  // Check for saved theme preference or respect OS preference
  useEffect(() => {
    const initialTheme = getInitialTheme();
    setTheme(initialTheme);
    applyTheme(initialTheme);
  }, []);

  // Apply theme to document
  useEffect(() => {
    applyTheme(theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prevTheme => {
      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
      return newTheme;
    });
  };

  return { theme, toggleTheme };
};