import { SettingsApp } from '@brikl/ui';

<SettingsApp
  user={{
    id: 'user_123',
    name: 'John Doe',
    email: 'john@example.com',
    avatar: '/avatars/john.jpg',
    bio: 'Développeur passionné par les nouvelles technologies',
    location: 'Paris, France',
    website: 'https://johndoe.dev'
  }}
  onUpdateProfile={handleUpdateProfile}
/>

<SettingsApp
  notificationPreferences={{
    email: {
      marketing: true,
      updates: true,
      security: true,
      weekly: false
    },
    push: {
      newMessages: true,
      mentions: true,
      reminders: false
    },
    sms: {
      security: true,
      marketing: false
    }
  }}
  onUpdateNotifications={handleUpdateNotifications}
/>

<SettingsApp
  security={{
    twoFactorEnabled: true,
    twoFactorMethod: 'app',
    activeSessions: [
      {
        id: 'session_1',
        device: 'Chrome sur MacBook Pro',
        location: 'Paris, France',
        lastActive: '2024-01-15T10:30:00Z',
        current: true
      },
      {
        id: 'session_2',
        device: 'Safari sur iPhone',
        location: 'Paris, France',
        lastActive: '2024-01-14T15:45:00Z',
        current: false
      }
    ],
    loginHistory: [
      {
        date: '2024-01-15T10:30:00Z',
        device: 'Chrome sur MacBook Pro',
        location: 'Paris, France',
        success: true
      }
    ]
  }}
  onEnableTwoFactor={handleEnableTwoFactor}
  onDisableTwoFactor={handleDisableTwoFactor}
  onRevokeSession={handleRevokeSession}
  onChangePassword={handleChangePassword}
/>

<SettingsApp
  integrations={{
    connected: [
      {
        id: 'github',
        name: 'GitHub',
        icon: '/icons/github.svg',
        connectedAt: '2024-01-10T09:00:00Z',
        permissions: ['read:user', 'repo']
      },
      {
        id: 'slack',
        name: 'Slack',
        icon: '/icons/slack.svg',
        connectedAt: '2024-01-05T14:30:00Z',
        permissions: ['chat:write']
      }
    ],
    available: [
      {
        id: 'discord',
        name: 'Discord',
        icon: '/icons/discord.svg',
        description: 'Connectez votre serveur Discord'
      },
      {
        id: 'trello',
        name: 'Trello',
        icon: '/icons/trello.svg',
        description: 'Synchronisez vos tableaux Trello'
      }
    ]
  }}
  onConnectIntegration={handleConnectIntegration}
  onDisconnectIntegration={handleDisconnectIntegration}
/>

import { SettingsApp } from '@brikl/ui';

export default function SettingsPage() {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john@example.com',
    avatar: '/avatars/john.jpg'
  });

  const [notifications, setNotifications] = useState({
    email: { marketing: true, updates: true },
    push: { newMessages: true }
  });

  const handleUpdateProfile = async (updatedUser) => {
    try {
      await updateUserProfile(updatedUser);
      setUser(updatedUser);
      showSuccess('Profil mis à jour avec succès');
    } catch (error) {
      showError('Erreur lors de la mise à jour du profil');
    }
  };

  const handleUpdateNotifications = async (preferences) => {
    try {
      await updateNotificationPreferences(preferences);
      setNotifications(preferences);
      showSuccess('Préférences de notification mises à jour');
    } catch (error) {
      showError('Erreur lors de la mise à jour des notifications');
    }
  };

  return (
    <SettingsApp
      user={user}
      onUpdateProfile={handleUpdateProfile}
      notificationPreferences={notifications}
      onUpdateNotifications={handleUpdateNotifications}
      security={securityConfig}
      integrations={integrationsConfig}
      theme={{
        primary: '#3B82F6',
        accent: '#10B981'
      }}
      sections={[
        'profile',
        'notifications',
        'security',
        'integrations',
        'billing',
        'advanced'
      ]}
    />
  );
}

<SettingsApp
  customSections={[
    {
      id: 'team',
      title: 'Équipe',
      icon: <IconUsers />,
      component: <TeamSettings team={teamData} />
    },
    {
      id: 'api',
      title: 'API',
      icon: <IconCode />,
      component: <ApiSettings apiKeys={apiKeys} />
    }
  ]}
/>