import { HStack, PinInput, PinInputField } from "@chakra-ui/react"
import Modal from '~/common/components/elements/Modal'

const FormOTP = () => {
  return (
    <Modal active={false} className="w-10/12 md:w-fit px-10" mode="desktop">
      <div className="pb-8 flex flex-col items-center">
        <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div>
        <HStack>
          <PinInput size='lg' otp>
            <PinInputField autoFocus />
            <PinInputField />
            <PinInputField />
            <PinInputField />
          </PinInput>
        </HStack>
        <div className="mt-4">Kode OTP dikirimkan ke email anda</div>
      </div>
    </Modal>
  )
}

export default FormOTP