import type { WidgetProps } from "./types";
import { ReservedControls } from "./ReservedControls";
export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
  return (
    <div className="space-y-2">
      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
      {descriptor.intro && <p className="text-sm text-muted-foreground">{descriptor.intro}</p>}
      <div className="flex flex-col gap-2">
        {descriptor.options?.map((o) => (
          <button key={o.id} className="border rounded px-3 py-2 text-left hover:bg-accent"
            onClick={() => onRespond({ id: descriptor.id, kind: "select", choices: [o.id] })}>
            {o.label}{o.recommended && <span className="ml-2 text-xs text-green-600">(consigliato)</span>}
          </button>
        ))}
      </div>
      <ReservedControls reserved={descriptor.reserved} onControl={(c) => onRespond({ id: descriptor.id, control: c })} />
    </div>
  );
}