import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { UserSettings } from '../types/settings';
import { PreferenceSettings } from './PreferenceSettings';
import { NotificationSettings } from './NotificationSettings';
import { PrivacySettings } from './PrivacySettings';
import { ContentSettings } from './ContentSettings';

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

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

  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,
    });
  };

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

      <TabsContent value="preferences" className="mt-6">
        <PreferenceSettings
          preferences={settings.preferences}
          onChange={handlePreferencesChange}
        />
      </TabsContent>

      <TabsContent value="notifications" className="mt-6">
        <NotificationSettings
          notifications={settings.notifications}
          onChange={handleNotificationsChange}
        />
      </TabsContent>

      <TabsContent value="privacy" className="mt-6">
        <PrivacySettings
          privacy={settings.privacy}
          onChange={handlePrivacyChange}
        />
      </TabsContent>

      <TabsContent value="content" className="mt-6">
        <ContentSettings
          content={settings.content}
          onChange={handleContentChange}
        />
      </TabsContent>
    </Tabs>
  );
}