<Dropdown
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' }
  ]}
  placeholder="Sélectionnez une option"
/>

<Dropdown
  options={[
    { label: 'Français', value: 'fr' },
    { label: 'English', value: 'en' },
    { label: 'Español', value: 'es' }
  ]}
  value="fr"
  onChange={(value) => console.log('Langue sélectionnée:', value)}
/>

<Dropdown
  options={[
    {
      label: 'Europe',
      options: [
        { label: 'France', value: 'fr' },
        { label: 'Allemagne', value: 'de' },
        { label: 'Espagne', value: 'es' }
      ]
    },
    {
      label: 'Amérique',
      options: [
        { label: 'États-Unis', value: 'us' },
        { label: 'Canada', value: 'ca' }
      ]
    }
  ]}
  placeholder="Sélectionnez un pays"
/>

<Dropdown
  options={options}
  disabled
  placeholder="Dropdown désactivé"
/>

<Dropdown
  options={options}
  error="Veuillez sélectionner une option"
  placeholder="Sélectionnez une option"
/>

<Dropdown
  options={[
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Date', value: 'date' },
    { label: 'Elderberry', value: 'elderberry' }
  ]}
  searchable
  placeholder="Rechercher un fruit..."
/>

import { Dropdown } from '@brikl/ui';
import { IconUser, IconSettings, IconLogout } from '@brikl/icons';

<Dropdown
  options={[
    { label: 'Profil', value: 'profile', icon: <IconUser /> },
    { label: 'Paramètres', value: 'settings', icon: <IconSettings /> },
    { label: 'Déconnexion', value: 'logout', icon: <IconLogout /> }
  ]}
  placeholder="Menu utilisateur"
/>

import { useState } from 'react';
import { Dropdown } from '@brikl/ui';

function AdvancedDropdown() {
  const [selectedValue, setSelectedValue] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  const options = [
    { label: 'Développeur', value: 'developer' },
    { label: 'Designer', value: 'designer' },
    { label: 'Product Manager', value: 'pm' }
  ];

  return (
    <Dropdown
      options={options}
      value={selectedValue}
      onChange={setSelectedValue}
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      placeholder="Sélectionnez votre rôle"
    />
  );
}