import { useId } from 'react'

import FieldError from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import { cn } from '@/lib/utils'

import type { FC, ReactNode } from 'react'

type FieldState = { describedBy?: string
		    invalid:      boolean }

type Props = {
    children:   (state: FieldState) => ReactNode
    checkBox?:   { label:    string
		   checked:  boolean
		   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
    className?:  string
    label:      ReactNode
    messages?:  string[] }


const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
  const id = useId ()
  const invalid = messages != null && messages.length > 0
  const errorId = invalid ? `${ id }-error` : undefined

  return (
      <div className={cn (className)}>
	<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
	{children ({ describedBy: errorId, invalid })}
	<FieldError id={errorId} messages={messages}/>
      </div>)
}


export default FormField