try to do better

frontend/src/components/profile/SettingsSection.tsx

@@ -0,0 +1,58 @@
+import { Settings, Palette, Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { 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>
+  );
+}