import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  AGENT_ROLE_OPTIONS,
  PRIMARY_AGENT_ROLE_OPTIONS,
} from "@/lib/agent-roles";

type AgentRoleFieldProps = {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  listId: string;
};

export function AgentRoleField({
  value,
  onChange,
  disabled = false,
  listId,
}: AgentRoleFieldProps) {
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground">Role</label>
      <Input
        value={value}
        list={listId}
        onChange={(event) => onChange(event.target.value)}
        placeholder="e.g. Backend Code, UI, Security Review"
        disabled={disabled}
      />
      <datalist id={listId}>
        {AGENT_ROLE_OPTIONS.map((role) => (
          <option key={role} value={role} />
        ))}
      </datalist>
      <div className="flex flex-wrap gap-2">
        {PRIMARY_AGENT_ROLE_OPTIONS.map((role) => (
          <Button
            key={role}
            type="button"
            variant={value === role ? "primary" : "outline"}
            size="sm"
            className="h-8 rounded-lg px-2.5 text-xs"
            onClick={() => onChange(role)}
            disabled={disabled}
          >
            {role}
          </Button>
        ))}
      </div>
    </div>
  );
}
