import { type ComponentProps } from 'react'

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

import { Email } from './Email'
import { Number } from './Number'
import { OTP } from './OTP'
import { Password } from './Password'
import { Search } from './Search'

type InputProps = ComponentProps<'input'> & RootStylesProps

function Input({ type = 'text', sizes, className, ...props }: InputProps) {
	return (
		<input
			type={type}
			className={rootStyles({ sizes, className })}
			{...props}
		/>
	)
}

Input.Email = Email
Input.Password = Password
Input.Search = Search
Input.OTP = OTP
Input.Number = Number

export { Input }
