'use client';

import { useEffect } from 'react';
import { useThemeStore } from '@/stores/theme-store';
import { themes } from '@/themes';

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const { theme } = useThemeStore();

  useEffect(() => {
    const selectedTheme = themes[theme];
    const root = document.documentElement;

    Object.entries(selectedTheme.cssVars).forEach(([key, value]) => {
      root.style.setProperty(key, value);
    });

    if (theme === 'dark') {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
  }, [theme]);

  return <>{children}</>;
}