'use client'

import { type ComponentProps } from 'react'

import { type RootStylesProps, rootStyles } from './Form.styles'

import { FormItem } from './Item'
import { FormLabel } from './Label'
import { FormMessage } from './Message'

type FormProps = ComponentProps<'form'> & RootStylesProps

function Form({ layout, className, ...props }: FormProps) {
	return <form className={rootStyles({ layout, className })} {...props} />
}

Form.Item = FormItem
Form.Label = FormLabel
Form.Message = FormMessage

export { Form }
