import { ThemeId, Themes, useTheme } from './ThemeContext';
import { Palette } from 'lucide-react';
import React from 'react';

export const ThemeSwitcher: React.FC = () => {
    const { currentTheme, setTheme } = useTheme();

    return (
        <div className="flex items-center gap-2 bg-slate-950/80 border border-slate-800 p-2 rounded-xl backdrop-blur-md">
            <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5 px-1">
                <Palette className="h-3.5 w-3.5 text-cyan-400" /> Farbdesign:
            </span>
            <div className="flex items-center gap-1.5">
                {(Object.keys(Themes) as ThemeId[]).map((id) => {
                    const theme = Themes[id];
                    const isActive = currentTheme.id === id;
                    return (
                        <button
                            key={id}
                            onClick={() => setTheme(id)}
                            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-all border ${
                                isActive
                                    ? `${theme.borderAccent} bg-slate-900 text-white shadow-md`
                                    : 'border-slate-800 bg-slate-900/40 text-slate-400 hover:text-white hover:border-slate-700'
                            }`}
                            title={theme.name}
                        >
                            <span className={`h-2.5 w-2.5 rounded-full ${theme.colorPreview} ${isActive ? 'animate-pulse' : ''}`} />
                            <span className="hidden sm:inline">{theme.name.split(' ')[0]}</span>
                        </button>
                    );
                })}
            </div>
        </div>
    );
};