import { cloneElement, useId, type ReactElement, type ReactNode } from "react";

// подпись над контролом; связь через htmlFor/id, подсказка и ошибка — через aria-describedby (имя поля — только подпись)
export function Field({ label, hint, error, children }: { label: string; hint?: ReactNode; error?: ReactNode; children: ReactElement<Record<string, unknown>> }) {
  const id = useId();
  const described = [hint && `${id}-hint`, error && `${id}-err`].filter(Boolean).join(" ") || undefined;
  return (
    <div className="ui-field">
      <label className="ui-field__label" htmlFor={id}>{label}</label>
      {cloneElement(children, { id, "aria-describedby": described, ...(error ? { "aria-invalid": "true" } : {}) })}
      {hint && <span className="ui-field__hint" id={`${id}-hint`}>{hint}</span>}
      {error && <span className="ui-field__error" id={`${id}-err`} role="alert">{error}</span>}
    </div>
  );
}