components/SentenceCombobox.tsx

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox";

export interface Option {
  id: string;
  label: string;
}

interface Props {
  value: string;
  options: Option[];
  onChange: (id: string) => void;
  ariaLabel: string;
  /** shown in the search field inside the popup */
  placeholder?: string;
  /** render the value in placeholder grey — a default nobody has confirmed yet */
  muted?: boolean;
}

/**
 * A type-ahead that reads as part of the sentence. Same chip as
 * SentenceSelect, but the list is long enough (316 hardware configurations)
 * that scrolling it is hopeless — so the popup opens on a search field.
 */
export default function SentenceCombobox({
  value,
  options,
  onChange,
  ariaLabel,
  placeholder = "Search",
  muted = false,
}: Props) {
  const current = options.find((o) => o.id === value) ?? options[0];

  return (
    <Combobox
      items={options}
      value={current}
      onValueChange={(o: Option | null) => o && onChange(o.id)}
      itemToStringLabel={(o: Option) => o.label}
    >
      <ComboboxTrigger
        aria-label={ariaLabel}
        className={`inline-flex h-[38px] lg:h-[52px] items-center gap-2.5 rounded-md bg-paper px-2.5 lg:px-3.5 text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] ring-raised [&_svg]:text-graphite ${
          muted ? "text-ash" : "text-obsidian"
        }`}
      >
        <ComboboxValue />
      </ComboboxTrigger>
      <ComboboxContent className="min-w-[280px] border-hairline bg-paper">
        <ComboboxInput placeholder={placeholder} showTrigger={false} />
        <ComboboxEmpty className="font-mono text-[13px] text-graphite">
          Nothing matches
        </ComboboxEmpty>
        <ComboboxList>
          {(o: Option) => (
            <ComboboxItem key={o.id} value={o} className="font-mono text-[13px]">
              {o.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}