import {
  Alert, Avatar, AvatarGroup, Badge, Button,
  Card, CardHeader, CardBody, CardFooter,
  Divider, Input, Modal, Select, Skeleton, SkeletonCard,
  Toggle, Tooltip,
} from "@cookest/ui";
import "@cookest/ui/styles.css";

// Variantes
<Button variant="primary">Guardar alterações</Button>
<Button variant="secondary">Cancelar</Button>
<Button variant="ghost">Saber mais</Button>
<Button variant="danger">Eliminar conta</Button>

// Tamanhos
<Button size="sm">Pequeno</Button>
<Button size="md">Médio</Button>
<Button size="lg">Grande</Button>

// Estado de carregamento
<Button loading>A guardar…</Button>

// Ícones
<Button iconLeft={<PlusIcon />}>Adicionar item</Button>
<Button iconRight={<ArrowRightIcon />}>Continuar</Button>

// Básico
<Input label="Email" type="email" placeholder="utilizador@exemplo.com" />

// Com texto auxiliar
<Input label="Nome de utilizador" helperText="3–20 caracteres, apenas minúsculas" />

// Estado de erro
<Input label="Palavra-passe" type="password" error="Mínimo 8 caracteres obrigatório" />

// Ícones
<Input label="Pesquisar" iconLeft={<SearchIcon />} placeholder="Pesquisar receitas…" />

// Largura total
<Input label="Nome" fullWidth />

// Cartão simples com preenchimento
<Card>
  <p>Conteúdo do cartão</p>
</Card>

// Cartão estruturado
<Card padding="none">
  <CardHeader>Detalhes da Receita</CardHeader>
  <CardBody>
    <p>Ingredientes e passos…</p>
  </CardBody>
  <CardFooter>
    <Button>Começar a cozinhar</Button>
  </CardFooter>
</Card>

// Cartão interativo (elevação ao passar o rato)
<Card variant="interactive" onClick={handleClick}>
  <p>Clique em mim</p>
</Card>

<Badge variant="success">Ativo</Badge>
<Badge variant="warning" dot>A expirar em breve</Badge>
<Badge variant="error" size="sm">Sem stock</Badge>
<Badge removable onRemove={() => removeTag(id)}>Vegan</Badge>

// Com imagem
<Avatar src="/utilizadores/alice.jpg" alt="Alice Silva" size="lg" />

// Fallback de iniciais
<Avatar alt="Bob Jones" size="md" />

// Grupo
<AvatarGroup max={3}>
  <Avatar alt="Alice Silva" />
  <Avatar alt="Bob Jones" />
  <Avatar alt="Carla Branco" />
  <Avatar alt="David Verde" />
</AvatarGroup>

const [aberto, setAberto] = useState(false);

<Button onClick={() => setAberto(true)}>Abrir modal</Button>

<Modal
  open={aberto}
  onClose={() => setAberto(false)}
  title="Confirmar eliminação"
  footer={
    <>
      <Button variant="ghost" onClick={() => setAberto(false)}>Cancelar</Button>
      <Button variant="danger" onClick={handleEliminar}>Eliminar</Button>
    </>
  }
>
  <p>Esta ação não pode ser desfeita.</p>
</Modal>

<Tooltip content="Guardar alterações" position="top">
  <Button variant="ghost" size="sm">
    <SaveIcon />
  </Button>
</Tooltip>

const [ativado, setAtivado] = useState(false);

<Toggle
  checked={ativado}
  onChange={setAtivado}
  label="Ativar notificações"
/>

const [dieta, setDieta] = useState("");

<Select
  label="Preferência alimentar"
  options={[
    { value: "none", label: "Sem preferência" },
    { value: "vegan", label: "Vegan" },
    { value: "vegetarian", label: "Vegetariano" },
    { value: "gluten-free", label: "Sem glúten" },
  ]}
  value={dieta}
  onChange={setDieta}
  searchable
/>

<SkeletonCard />

// Linhas de texto
<Skeleton variant="text" lines={3} />

// Placeholder de avatar
<Skeleton variant="circular" width={40} height={40} />

// Placeholder de imagem
<Skeleton variant="rectangular" width="100%" height={200} />

// Cartão completo
<SkeletonCard />

// Banner informativo estático
<Alert variant="info" title="Sabia que…?">
  Pode poupar até 20% ao mudar para o plano Pro.
</Alert>

// Erro dispensável
const [mostrar, setMostrar] = useState(true);
<Alert
  variant="error"
  title="Falha no envio"
  dismissible
  visible={mostrar}
  onDismiss={() => setMostrar(false)}
>
  O ficheiro excede o limite de 10 MB.
</Alert>

// Horizontal
<Divider />

// Com rótulo
<Divider label="ou continuar com" />

// Vertical (necessita contexto de altura definida)
<div className="flex h-8 items-center gap-4">
  <span>Opção A</span>
  <Divider orientation="vertical" />
  <span>Opção B</span>
</div>