import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { NotificationSettings } from './NotificationSettings';
import { PrivacySettings } from './PrivacySettings';
import { ContentSettings } from './ContentSettings';
import { PreferenceSettings } from './PreferenceSettings';
import { UserSettings } from '../types/settings';
import { Bell, Shield, FileText, Settings } from 'lucide-react';

interface SettingsTabsProps {
  settings: UserSettings;
  onChange: (settings: UserSettings) => void;
}

export function SettingsTabs({ settings, onChange }: SettingsTabsProps) {
  const handleNotificationsChange = (notifications: typeof settings.notifications) => {
    onChange({
      ...settings,
      notifications,
    });
  };

  const handlePrivacyChange = (privacy: typeof settings.privacy) => {
    onChange({
      ...settings,
      privacy,
    });
  };

  const handleContentChange = (content: typeof settings.content) => {
    onChange({
      ...settings,
      content,
    });
  };

  const handlePreferencesChange = (preferences: typeof settings.preferences) => {
    onChange({
      ...settings,
      preferences,
    });
  };

  return (
    <Tabs defaultValue="notifications" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="notifications">
          <Bell className="mr-2 h-4 w-4" />
          Notifications
        </TabsTrigger>
        <TabsTrigger value="privacy">
          <Shield className="mr-2 h-4 w-4" />
          Confidentialité
        </TabsTrigger>
        <TabsTrigger value="content">
          <FileText className="mr-2 h-4 w-4" />
          Contenu
        </TabsTrigger>
        <TabsTrigger value="preferences">
          <Settings className="mr-2 h-4 w-4" />
          Préférences
        </TabsTrigger>
      </TabsList>

      <TabsContent value="notifications" className="mt-6">
        <Card>
          <CardHeader>
            <CardTitle>Notifications</CardTitle>
            <CardDescription>
              Gérez vos préférences de notifications
            </CardDescription>
          </CardHeader>
          <CardContent>
            <NotificationSettings
              notifications={settings.notifications}
              onChange={handleNotificationsChange}
            />
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="privacy" className="mt-6">
        <Card>
          <CardHeader>
            <CardTitle>Confidentialité</CardTitle>
            <CardDescription>
              Gérez vos paramètres de confidentialité
            </CardDescription>
          </CardHeader>
          <CardContent>
            <PrivacySettings
              privacy={settings.privacy}
              onChange={handlePrivacyChange}
            />
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="content" className="mt-6">
        <Card>
          <CardHeader>
            <CardTitle>Contenu</CardTitle>
            <CardDescription>
              Gérez vos préférences de contenu
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ContentSettings
              content={settings.content}
              onChange={handleContentChange}
            />
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="preferences" className="mt-6">
        <Card>
          <CardHeader>
            <CardTitle>Préférences</CardTitle>
            <CardDescription>
              Gérez vos préférences générales
            </CardDescription>
          </CardHeader>
          <CardContent>
            <PreferenceSettings
              preferences={settings.preferences}
              onChange={handlePreferencesChange}
            />
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

