import { useTranslation } from "react-i18next";

import type { components } from "../api/schema";
import { useConfig } from "../config/config-context";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type LabelInput = components["schemas"]["LabelInput"];

/** Single-language label editor. Authors one label at the instance default language;
 *  emits a one-entry LabelInput[] (empty array when blank). The multilingual data model
 *  is unchanged — this only simplifies authoring. */
export function LabelEditor({
  value,
  onChange,
}: {
  value: LabelInput[];
  onChange: (labels: LabelInput[]) => void;
}) {
  const { t } = useTranslation();
  const { default_language } = useConfig();

  const current =
    value.find((l) => l.lang === default_language)?.label ?? value[0]?.label ?? "";

  const set = (label: string) =>
    onChange(label.trim() ? [{ lang: default_language, label }] : []);

  return (
    <div className="space-y-1">
      <Label htmlFor="label">{t("labels.label")}</Label>
      <Input id="label" value={current} onChange={(e) => set(e.target.value)} />
    </div>
  );
}