Autocomplete

"use client";

import { Autocomplete, Avatar, FormField, toast } from "@paytime/ui";
import { useState } from "react";

const PARTNERS = [
  { value: "1", label: "Grau Técnico LTDA", doc: "12.345.678" },
  { value: "2", label: "Mercado Bom Preço", doc: "98.765.432" },
  { value: "3", label: "Clínica Vida Plena", doc: "45.678.912" },
  { value: "4", label: "Técnica Industrial SA", doc: "23.456.789" },
];

export default function Example() {
  const [query, setQuery] = useState("");
  return (
    <FormField label="Parceiro" className="max-w-md">
      <Autocomplete
        query={query}
        onQueryChange={setQuery}
        placeholder="Digite o nome (ex.: tecnico)"
        onSelect={(option) => toast(`Selecionado: ${option.label}`)}
        options={PARTNERS.map((partner) => ({
          value: partner.value,
          label: partner.label,
          leading: <Avatar size="xs" name={partner.label} />,
          meta: partner.doc,
        }))}
      />
    </FormField>
  );
}