"use client";

/**
 * A single PO Terms & Conditions slot (issue #11) — a combobox: type a one-off
 * clause OR pick a catalogued one. Implemented as a native <input list> +
 * <datalist> so it stays free-text (custom wording per PO) while suggesting the
 * admin-managed clauses for this category, and submits via plain FormData.
 *
 * `options` are the active clause texts (suggestions). `current` is the PO's
 * existing/default value for this slot; it's just the input's initial value, so
 * a value not in the catalogue is preserved as-is.
 */
export function TermsField({
  field,
  options,
  current,
  className,
}: {
  field: string;
  options: string[];
  current?: string | null;
  className?: string;
}) {
  const listId = `terms-list-${field}`;
  return (
    <>
      <input
        name={field}
        list={listId}
        defaultValue={current ?? ""}
        autoComplete="off"
        placeholder="Type a clause or pick one…"
        className={className}
      />
      <datalist id={listId}>
        {options.map((o) => (
          <option key={o} value={o} />
        ))}
      </datalist>
    </>
  );
}