import { Check } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import type { Theme } from '../../types';
import { THEMES } from '../../constants';

interface ThemeSelectorProps {
  currentTheme: Theme;
  onThemeChange: (theme: Theme) => void;
}

export function ThemeSelector({ currentTheme, onThemeChange }: ThemeSelectorProps) {
  const { t } = useTranslation();

  return (
    <div>
      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
        {t('profile.theme')}
      </label>
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
        {THEMES.map((theme) => (
          <button
            key={theme.id}
            onClick={() => onThemeChange(theme.id)}
            className={`relative p-4 rounded-xl ${theme.gradient} transition-all duration-300 ${
              currentTheme === theme.id
                ? 'ring-4 ring-blue-500 scale-105'
                : 'hover:scale-105'
            }`}
          >
            {currentTheme === theme.id && (
              <div className="absolute top-2 right-2 bg-white rounded-full p-1">
                <Check className="w-4 h-4 text-blue-600" />
              </div>
            )}
            <p className="text-sm font-medium text-center text-white drop-shadow-lg">
              {theme.name}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}