import type * as React from 'react'

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { cn } from '@/lib/utils'

type AppFieldProps = {
  label: string
  htmlFor?: string
  description?: string
  invalid?: boolean
  required?: boolean
  className?: string
  children: React.ReactNode
}

export function AppField({ label, htmlFor, description, invalid, required, className, children }: AppFieldProps) {
  return (
    <Field className={cn(className)} data-invalid={invalid ? true : undefined}>
      <FieldLabel htmlFor={htmlFor}>
        {label}
        {required ? <span className="text-destructive">*</span> : null}
      </FieldLabel>
      {children}
      {description ? <FieldDescription>{description}</FieldDescription> : null}
    </Field>
  )
}