Select

'use client';

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

export default function SelectDemo() {
  return (
    <Select name="servico" label="Serviço" placeholder="Selecione um serviço" className="w-full max-w-xs">
      <SelectTrigger />
      <SelectContent>
        <SelectItem id="site">Site institucional</SelectItem>
        <SelectItem id="loja">Loja virtual</SelectItem>
        <SelectItem id="sistema">Sistema de gestão</SelectItem>
        <SelectItem id="landing">Landing page</SelectItem>
      </SelectContent>
    </Select>
  );
}

'use client';

import { Select, SelectContent, SelectItem, SelectSection, SelectTrigger } from '@/components/ui/select';

export default function SelectGroups() {
  return (
    <Select label="Horário de atendimento" placeholder="Escolha um horário" className="w-full max-w-xs">
      <SelectTrigger />
      <SelectContent>
        <SelectSection title="Manhã">
          <SelectItem id="09">09:00</SelectItem>
          <SelectItem id="10">10:00</SelectItem>
          <SelectItem id="11" isDisabled>
            11:00 (ocupado)
          </SelectItem>
        </SelectSection>
        <SelectSection title="Tarde">
          <SelectItem id="14">14:00</SelectItem>
          <SelectItem id="15">15:00</SelectItem>
          <SelectItem id="16">16:00</SelectItem>
        </SelectSection>
      </SelectContent>
    </Select>
  );
}

'use client';

import { useState } from 'react';
import type { Key } from 'react-aria-components';
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

const unidades = [
  { id: 'centro', nome: 'Unidade Centro', endereco: 'Rua XV de Novembro, 120' },
  { id: 'batel', nome: 'Unidade Batel', endereco: 'Av. do Batel, 1450' },
  { id: 'portao', nome: 'Unidade Portão', endereco: 'Rua João Bettega, 88' },
];

export default function SelectControlled() {
  const [unidade, setUnidade] = useState<Key | null>('centro');
  const atual = unidades.find((u) => u.id === unidade);
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Select label="Unidade" value={unidade} onChange={setUnidade}>
        <SelectTrigger />
        <SelectContent items={unidades}>{(u) => <SelectItem>{u.nome}</SelectItem>}</SelectContent>
      </Select>
      <p className="text-sm text-muted-foreground">Endereço: {atual?.endereco ?? '—'}</p>
    </div>
  );
}

'use client';

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

export default function SelectMultiple() {
  return (
    <Select
      selectionMode="multiple"
      name="pagamentos"
      label="Formas de pagamento aceitas"
      placeholder="Selecione"
      defaultValue={['pix', 'cartao']}
      className="w-full max-w-xs"
    >
      <SelectTrigger />
      <SelectContent>
        <SelectItem id="pix">Pix</SelectItem>
        <SelectItem id="cartao">Cartão</SelectItem>
        <SelectItem id="boleto">Boleto</SelectItem>
        <SelectItem id="dinheiro">Dinheiro</SelectItem>
      </SelectContent>
    </Select>
  );
}

'use client';

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

export default function SelectSizes() {
  return (
    <div className="flex items-center gap-3 text-sm text-muted-foreground">
      <span>Itens por página</span>
      <Select aria-label="Itens por página" defaultValue="20">
        <SelectTrigger size="sm" className="w-20" />
        <SelectContent>
          <SelectItem id="10">10</SelectItem>
          <SelectItem id="20">20</SelectItem>
          <SelectItem id="50">50</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

'use client';

import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

export default function SelectDisabled() {
  return (
    <Select
      label="Estado"
      defaultValue="pr"
      isDisabled
      description="Definido pelo endereço cadastrado."
      className="w-full max-w-xs"
    >
      <SelectTrigger />
      <SelectContent>
        <SelectItem id="pr">Paraná</SelectItem>
        <SelectItem id="sc">Santa Catarina</SelectItem>
        <SelectItem id="sp">São Paulo</SelectItem>
      </SelectContent>
    </Select>
  );
}

'use client';

import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';

export default function SelectInvalid() {
  return (
    <Form onSubmit={(e) => e.preventDefault()} className="w-full max-w-xs">
      <Select
        name="servico"
        label="Serviço"
        placeholder="Selecione um serviço"
        isRequired
        errorMessage="Selecione um serviço para continuar."
      >
        <SelectTrigger />
        <SelectContent>
          <SelectItem id="site">Site institucional</SelectItem>
          <SelectItem id="loja">Loja virtual</SelectItem>
          <SelectItem id="sistema">Sistema de gestão</SelectItem>
        </SelectContent>
      </Select>
      <Button type="submit" className="self-start">
        Continuar
      </Button>
    </Form>
  );
}