"use client";

import { Field } from "@/components/ui/Field";
import { Picklist } from "@/components/ui/Picklist";
import { TITLE_PREFIXES, TITLE_SUFFIXES } from "@/lib/titles";

export type TitleValue = { titlePrefix: string[]; titleSuffix: string[] };

// Shared by the hire wizard (StepPerson) and DatenAendernPanel — both edit
// the same title_prefix/title_suffix columns, just against different local
// state, same pattern as RoleEmploymentFields.
export function TitleFields({ value, onChange }: { value: TitleValue; onChange: (patch: Partial<TitleValue>) => void }) {
  return (
    <div className="flex flex-col gap-3">
      <Field label="Titel (vorangestellt)" dense>
        {(p) => <Picklist {...p} options={TITLE_PREFIXES} value={value.titlePrefix} onChange={(titlePrefix) => onChange({ titlePrefix })} />}
      </Field>
      <Field label="Titel (nachgestellt)" dense>
        {(p) => <Picklist {...p} options={TITLE_SUFFIXES} value={value.titleSuffix} onChange={(titleSuffix) => onChange({ titleSuffix })} />}
      </Field>
    </div>
  );
}