import React from 'react'

/**
 * Nova FormField – thin wrapper that pairs a label with any input-like child,
 * plus optional hint and error text. Use this for custom controls (NovaSelect,
 * Toggle, etc.) that don't carry their own label.
 *
 * @prop {string}         label    - visible label text
 * @prop {boolean}        required - shows red asterisk
 * @prop {string}         error    - validation error message
 * @prop {string}         hint     - helper text shown below control
 * @prop {string}         htmlFor  - id of the labelled element
 */
export default function FormField({ label, required, error, hint, htmlFor, children, className = '' }) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <label
          htmlFor={htmlFor}
          className="text-sm font-medium text-white/85 select-none"
        >
          {label}
          {required && <span className="text-red-400 ml-1">*</span>}
        </label>
      )}

      {children}

      {error && (
        <p role="alert" className="text-xs text-red-400">
          {error}
        </p>
      )}

      {!error && hint && (
        <p className="text-xs text-slate-500">{hint}</p>
      )}
    </div>
  )
}