import { Settings, Palette, Languages } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import type { Theme } from '../../types';
import { Card } from '../ui';
import { ThemeSelector } from './ThemeSelector';
import { LanguageSelector } from './LanguageSelector';

interface SettingsSectionProps {
  currentTheme: Theme;
  currentLanguage: string;
  onThemeChange: (theme: Theme) => void;
  onLanguageChange: (lang: string) => void;
}

export function SettingsSection({
  currentTheme,
  currentLanguage,
  onThemeChange,
  onLanguageChange,
}: SettingsSectionProps) {
  const { t } = useTranslation();

  return (
    <Card>
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-xl">
          <Settings className="w-6 h-6" />
        </div>
        <h2 className="text-xl font-bold text-gray-800 dark:text-white">{t('profile.settings')}</h2>
      </div>

      <div className="space-y-6">
        <div>
          <div className="flex items-center gap-2 mb-3">
            <Palette className="w-4 h-4 text-gray-600 dark:text-gray-400" />
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
              {t('profile.theme')}
            </h3>
          </div>
          <ThemeSelector currentTheme={currentTheme} onThemeChange={onThemeChange} />
        </div>

        <div>
          <div className="flex items-center gap-2 mb-3">
            <Languages className="w-4 h-4 text-gray-600 dark:text-gray-400" />
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
              {t('profile.language')}
            </h3>
          </div>
          <LanguageSelector
            currentLanguage={currentLanguage}
            onLanguageChange={onLanguageChange}
          />
        </div>
      </div>
    </Card>
  );
}