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

/** A shared label and hint wrapper for native form controls. */
export function Field({
  label,
  hint,
  id: providedId,
  className = "",
  children,
}: {
  label: ReactNode;
  hint?: ReactNode;
  id?: string;
  className?: string;
  children: (id: string, describedBy?: string) => ReactNode;
}) {
  const generatedId = useId();
  const id = providedId ?? generatedId;
  const hintId = hint != null ? `${id}-hint` : undefined;

  return (
    <div className={`ds-field ${className}`}>
      <label htmlFor={id}>{label}</label>
      {children(id, hintId)}
      {hintId && <small id={hintId}>{hint}</small>}
    </div>
  );
}
