"use client";

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">
      <div>
        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (vorangestellt)</label>
        <Picklist options={TITLE_PREFIXES} value={value.titlePrefix} onChange={(titlePrefix) => onChange({ titlePrefix })} />
      </div>
      <div>
        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (nachgestellt)</label>
        <Picklist options={TITLE_SUFFIXES} value={value.titleSuffix} onChange={(titleSuffix) => onChange({ titleSuffix })} />
      </div>
    </div>
  );
}