import React from 'react';

interface SettingsProps {
  isDarkMode: boolean;
  onToggleDarkMode: () => void;
}

export const Settings: React.FC<SettingsProps> = ({ isDarkMode, onToggleDarkMode }) => {
  return (
    <div className="max-w-2xl space-y-8">
      <section>
        <h3 className="text-xl font-bold mb-6">Erscheinungsbild</h3>
        <div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-slate-100 dark:border-slate-800 flex items-center justify-between">
          <div>
            <p className="font-bold">Dark Mode</p>
            <p className="text-sm text-slate-500">Das Design der Anwendung umschalten</p>
          </div>
          <button 
            onClick={onToggleDarkMode}
            className={`w-14 h-8 rounded-full transition-colors relative ${isDarkMode ? 'bg-brand-500' : 'bg-slate-200 dark:bg-slate-800'}`}
          >
            <div className={`absolute top-1 w-6 h-6 rounded-full bg-white shadow-sm transition-all ${isDarkMode ? 'left-7' : 'left-1'}`}></div>
          </button>
        </div>
      </section>

      <section>
        <h3 className="text-xl font-bold mb-6">CRM-Konfiguration</h3>
        <div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-slate-100 dark:border-slate-800 space-y-6">
          <div className="flex items-center justify-between py-2">
            <div>
              <p className="font-bold">AI Experten-Matching</p>
              <p className="text-sm text-slate-500">Automatische Vorschläge basierend auf Tender-Skills</p>
            </div>
            <input type="checkbox" defaultChecked className="w-5 h-5 accent-brand-500" />
          </div>
          <div className="flex items-center justify-between py-2 border-t border-slate-50 dark:border-slate-800">
            <div>
              <p className="font-bold">LinkedIn-Synchronisierung</p>
              <p className="text-sm text-slate-500">Profile automatisch mit LinkedIn-Daten anreichern</p>
            </div>
            <input type="checkbox" defaultChecked className="w-5 h-5 accent-brand-500" />
          </div>
        </div>
      </section>

      <section>
        <h3 className="text-xl font-bold mb-6">Über ICON</h3>
        <div className="p-6 bg-brand-500 rounded-3xl text-white shadow-xl shadow-brand-500/20">
          <p className="font-bold text-lg mb-2">Version 2.4.0</p>
          <p className="text-sm opacity-90 leading-relaxed">
            Ihr smartes CRM für die Expertenvermittlung. Diese Anwendung wurde für höchste Performance und intuitive Bedienung auf Desktop und Mobilgeräten optimiert.
          </p>
        </div>
      </section>
    </div>
  );
};