import { useState } from "react"

function OTPForm({ handleOTP }) {

    const [code, setCode] = useState('');

    return (
        <input
            value={code}
            onChange={e => {
                const value = e.target.value

                if (/^\d+$/.test(value) && value.length < 2) {
                    setCode(value)
                    handleOTP(e)
                } else {
                    setCode('')
                    e.target.value = ''
                }
            }}
            className={`border border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
            outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
            focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE]
            w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px] 
            ${code && '!border-[1px] !border-solid !border-[#5559CE]'}
            `}
        />
    )
}

export default OTPForm