import clsx from 'clsx'
import { type ComponentProps } from 'react'

import { unstable_OneTimePasswordField as RadixOTP } from 'radix-ui'

import { inputStyles, rootStyles } from './OTP.styles'

type OTPProps = ComponentProps<typeof RadixOTP.Root> & {
	length?: number
}

function OTP({ length = 6, className, value, ...props }: OTPProps) {
	return (
		<RadixOTP.Root className={clsx(rootStyles, className)} {...props}>
			{Array.from({ length }).map((_, index) => {
				return <RadixOTP.Input key={index} className={inputStyles} />
			})}
			<RadixOTP.HiddenInput />
		</RadixOTP.Root>
	)
}

export { OTP }
