"use client";

import { Input } from "@/components/ui/Input";
import { Select } from "@/components/ui/Select";
import { Field, Label } from "@/components/ui/Card";
import {
  AGE_BANDS,
  AGE_BAND_LABELS,
  PARTICIPANT_COUNTRIES,
} from "@/lib/validation/participant";

export interface ParticipantProfileValues {
  countryCode: string;
  regionCode: string;
  ageBand: string;
}

interface ParticipantProfileFieldsProps {
  values: ParticipantProfileValues;
  onChange: (values: ParticipantProfileValues) => void;
}

export function ParticipantProfileFields({
  values,
  onChange,
}: ParticipantProfileFieldsProps) {
  return (
    <>
      <Field>
        <Label htmlFor="countryCode">Country</Label>
        <Select
          id="countryCode"
          value={values.countryCode}
          onChange={(e) => onChange({ ...values, countryCode: e.target.value })}
        >
          <option value="">Select your country</option>
          {PARTICIPANT_COUNTRIES.map((c) => (
            <option key={c.code} value={c.code}>
              {c.name}
            </option>
          ))}
        </Select>
      </Field>

      <Field>
        <Label htmlFor="regionCode">State / region (optional)</Label>
        <Input
          id="regionCode"
          placeholder="e.g. Texas"
          maxLength={64}
          value={values.regionCode}
          onChange={(e) => onChange({ ...values, regionCode: e.target.value })}
        />
      </Field>

      <Field>
        <Label htmlFor="ageBand">Age range</Label>
        <Select
          id="ageBand"
          value={values.ageBand}
          onChange={(e) => onChange({ ...values, ageBand: e.target.value })}
        >
          <option value="">Select an age range</option>
          {AGE_BANDS.map((band) => (
            <option key={band} value={band}>
              {AGE_BAND_LABELS[band]}
            </option>
          ))}
        </Select>
      </Field>
    </>
  );
}