'use client';

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export type ThemeType = 'rtv' | 'netflix' | 'spotify' | 'hbo' | 'disney';

interface ThemeState {
  theme: ThemeType;
  setTheme: (theme: ThemeType) => void;
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set) => ({
      theme: 'rtv',
      setTheme: (theme) => {
        set({ theme });
        if (typeof window !== 'undefined') {
          const root = document.documentElement;
          root.classList.remove('theme-rtv', 'theme-netflix', 'theme-spotify', 'theme-hbo', 'theme-disney');
          root.classList.add(`theme-${theme}`);
        }
      },
    }),
    {
      name: 'cat-tv-theme',
    }
  )
);
