import { FaArrowLeft } from "react-icons/fa";
import React, { useState } from 'react';
import OtpInput from 'react-otp-input';
import Button from "../components/Elements/Buttons";
const CodeOtp = () => {
    const [otp, setOtp] = useState('');
    return (
        <>
          <div className="relative h-screen">
  <div className="absolute top-0 left-0 m-5 bg-[#c2b9ff] rounded-full w-10 h-10 flex justify-center items-center">
    <FaArrowLeft className="text-white text-2xl cursor-pointer" />
  </div>

  <div className="flex h-full justify-center items-center">
    <div className="flex lg:flex-row md:flex-row flex-col justify-center items-center gap-20">
      <div className="bg-purple-500 bg-opacity-40 rounded-full flex justify-center items-center bg-cover w-72 h-72 lg:w-96 lg:h-96 ">
        <img src="/image/Web Security 1.png" alt="" className="lg:w-72 w-60 object-cover" />
      </div>
      
      <div className="flex flex-col items-start ">
        <p className="text-3xl font-bold text-[#8A6BDB]">OTP Verification</p>
        <p className="text-lg mt-2">Please enter the 4 digit code sent to your email.</p>
        <div className="flex justify-center items-center mt-4 mx-auto">
          <OtpInput
            value={otp}
            onChange={setOtp}
            numInputs={4}
            renderSeparator={<span className="mx-2"></span>}
            renderInput={(props) => (
              <input
                {...props}
                className="w-16 h-16 text-center border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                style={{
                  width: '50px',
                  height: '50px',
                  margin: '0 5px',
                  textAlign: 'center',
                  fontSize: '18px',
                  border: '1px solid #ccc',
                  borderRadius: '4px',
                }}
              />
            )}
          />
        </div>
        <div className="grid w-full text-center gap-3">

        <Button variant="text-white py-3 lg:py-2 mt-5">Enter Code</Button>
        <p className="text-gray-400 ">Didn't receive the code in 00:58?
        Resend</p>
        </div>
      </div>
    </div>
  </div>
</div>





        </>
    )
}

export default CodeOtp