import type { HireDraftData } from "./types";

type StepPersonProps = {
  draft: HireDraftData;
  update: (patch: Partial<HireDraftData>) => void;
  locations: { id: string; name: string; country: string }[];
};

export function StepPerson({ draft, update, locations }: StepPersonProps) {
  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Vorname*</label>
          <input value={draft.firstName} onChange={(e) => update({ firstName: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Nachname*</label>
          <input value={draft.lastName} onChange={(e) => update({ lastName: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Geschlecht*</label>
          <select
            value={draft.gender}
            onChange={(e) => update({ gender: e.target.value as HireDraftData["gender"] })}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          >
            <option value="m">männlich</option>
            <option value="w">weiblich</option>
          </select>
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Geburtsdatum*</label>
          <input type="date" value={draft.birthDate} onChange={(e) => update({ birthDate: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
      </div>
      <div>
        <label className="mb-1 block text-sm font-semibold text-ink">SV-Nummer</label>
        <input value={draft.svNummer} onChange={(e) => update({ svNummer: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">E-Mail (privat)</label>
          <input type="email" value={draft.email} onChange={(e) => update({ email: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Telefon</label>
          <input value={draft.phone} onChange={(e) => update({ phone: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
        </div>
      </div>
      <div>
        <label className="mb-1 block text-sm font-semibold text-ink">Standort*</label>
        <select value={draft.locationId} onChange={(e) => update({ locationId: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
          <option value="">Bitte wählen…</option>
          {locations.map((l) => (
            <option key={l.id} value={l.id}>
              {l.name} ({l.country})
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}