'use client';

/**
 * Offers the shop's saved phrases wherever a message is composed.
 *
 * A picker rather than a free-text-only field, because the same handful of
 * notices get written over and over: choosing one keeps the wording
 * consistent and — more importantly — reuses a phrase that has already been
 * translated, instead of paying for a fresh translation of the same sentence.
 *
 * The chosen text lands in the field and stays editable. A template is a
 * starting point, not a constraint.
 */
export type Template = { id: string; textFr: string };

export default function TemplatePicker({
  templates,
  onPick,
  disabled = false,
  label = 'Modèle',
}: {
  templates: Template[];
  onPick: (textFr: string) => void;
  disabled?: boolean;
  label?: string;
}) {
  if (templates.length === 0) {
    return null;
  }

  return (
    <label className="flex items-center gap-2 text-sm">
      <span className="text-[var(--ink-muted)]">{label}</span>
      <select
        aria-label={`${label} de message`}
        value=""
        disabled={disabled}
        onChange={(event) => {
          const picked = templates.find((template) => template.id === event.target.value);
          if (picked) {
            onPick(picked.textFr);
          }
          // Back to the placeholder: the control is an action, not a state.
          event.target.value = '';
        }}
        className="max-w-56 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-1.5 text-sm disabled:opacity-40"
      >
        <option value="">Choisir…</option>
        {templates.map((template) => (
          <option key={template.id} value={template.id}>
            {template.textFr}
          </option>
        ))}
      </select>
    </label>
  );
}