'use client';

import { useThemeStore } from '@/stores/theme-store';
import { themes, type ThemeName } from '@/themes';
import { Button } from '@/components/ui/button';
import { Sun, Moon, Palette } from 'lucide-react';

const themeIcons: Record<ThemeName, React.ReactNode> = {
  light: <Sun className="h-4 w-4" />,
  vibrant: <Palette className="h-4 w-4" />,
  corporate: <Palette className="h-4 w-4" />,
  dark: <Moon className="h-4 w-4" />,
};

const themeOrder: ThemeName[] = ['light', 'vibrant', 'corporate', 'dark'];

export function Header({ title }: { title: string }) {
  const { theme, setTheme } = useThemeStore();

  const cycleTheme = () => {
    const currentIndex = themeOrder.indexOf(theme);
    const nextIndex = (currentIndex + 1) % themeOrder.length;
    setTheme(themeOrder[nextIndex]);
  };

  return (
    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
      <h1 className="text-xl font-semibold">{title}</h1>

      <div className="flex items-center gap-2">
        <Button
          variant="ghost"
          size="icon"
          onClick={cycleTheme}
          title={`Tema: ${themes[theme].name}`}
        >
          {themeIcons[theme]}
        </Button>
      </div>
    </header>
  );
}