import { Palette } from 'lucide-react';
import { themes, getTheme } from '../themes';

export default function ThemeSelector({ currentTheme, onThemeChange }) {
  const theme = getTheme(currentTheme);
  
  const themeColors = {
    modern: 'bg-gradient-to-r from-green-600 to-emerald-600',
    dark: 'bg-gray-800',
    light: 'bg-gray-100',
    purple: 'bg-purple-600',
    blue: 'bg-blue-600',
    green: 'bg-green-600',
  };

  return (
    <div className="relative group">
      <button className={`p-2 rounded-lg ${theme.hover} transition`}>
        <Palette className="w-5 h-5" />
      </button>
      
      <div className={`absolute right-0 mt-2 w-48 ${theme.secondary} rounded-lg shadow-xl ${theme.border} border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50`}>
        <div className="p-2">
          <div className={`text-xs ${theme.textSecondary} px-2 py-1 mb-1`}>Выберите тему</div>
          {Object.entries(themes).map(([key, themeItem]) => (
            <button
              key={key}
              onClick={() => onThemeChange(key)}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg ${theme.hover} transition ${
                currentTheme === key ? theme.tertiary : ''
              }`}
            >
              <div className={`w-4 h-4 rounded ${themeColors[key]}`} />
              <span className="text-sm">{themeItem.name}</span>
              {currentTheme === key && (
                <span className="ml-auto text-xs text-green-500">✓</span>
              )}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}