import type { ReactNode } from "react";
import FieldLabel from "./help/FieldLabel";
import { helpForFieldLabel } from "../utils/fieldHelp";
import { usePlatformLanguage } from "../i18n/LanguageContext";

export default function FormField({ label, help, children }: { label: ReactNode; help?: ReactNode; children: ReactNode }) {
  const { translateText } = usePlatformLanguage();
  const renderedLabel = typeof label === "string" ? translateText(label) : label;
  return (
    <label className="form-field">
      <FieldLabel className="form-label" help={help ?? helpForFieldLabel(label)}>{renderedLabel}</FieldLabel>
      {children}
    </label>
  );
}