"use client"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

interface FormFieldProps {
  label: string
  hint?: string
  error?: string
  required?: boolean
  children: React.ReactNode
}

function FormField({ label, hint, error, required, children }: FormFieldProps) {
  return (
    <Field data-invalid={!!error}>
      <FieldLabel>
        {label}
        {required && <span className="text-destructive ml-0.5">*</span>}
      </FieldLabel>
      {children}
      {hint && !error && <FieldDescription>{hint}</FieldDescription>}
      {error && <FieldDescription className="text-destructive">{error}</FieldDescription>}
    </Field>
  )
}

export { FormField, type FormFieldProps }