Combobox

'use client';
import { useState, useMemo } from 'react';
import { Check } from 'lucide-react';
import { T, TYPE, SP, RADIUS, transition } from '@/lib/tokens';

interface ComboboxProps<T extends { value: string; label: string }> {
  options: T[];
  value: string | null;
  onChange: (v: string | null) => void;
  placeholder?: string;
}

export function Combobox<T extends { value: string; label: string }>({
  options, value, onChange, placeholder
}: ComboboxProps<T>) {
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const filtered = useMemo(
    () => options.filter(o => o.label.toLowerCase().includes(query.toLowerCase())),
    [options, query]
  );
  const selected = options.find(o => o.value === value);

  return (
    <div style={{ position: 'relative' }}>
      <input
        type="text"
        role="combobox"
        aria-haspopup="listbox"
        aria-expanded={open}
        value={open ? query : selected?.label ?? ''}
        onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
        onFocus={() => setOpen(true)}
        onBlur={() => setTimeout(() => setOpen(false), 200)}
        placeholder={placeholder}
        // ... styles
      />
      {open && (
        <ul role="listbox">
          {filtered.map(o => (
            <li key={o.value} role="option" aria-selected={o.value === value}
              onMouseDown={() => { onChange(o.value); setOpen(false); setQuery(''); }}>
              {o.label}
              {o.value === value && <Check size={14} />}
            </li>
          ))}
          {filtered.length === 0 && <li>Sem resultados para "{query}"</li>}
        </ul>
      )}
    </div>
  );
}