import { Button } from "@mui/material"
import ArrowRightS from "../icons/ArrowRightS"
import OTPForm from "./element/OTPForm"
import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"

function SetCodePage({ setIsSendMsg }) {

    const handleOTP = (e) => {
        e.target.nextElementSibling &&
            e.target.nextElementSibling.focus()
    }

    return (
        <div className='rounded-[16px] mt-[32px] border border-solid border-[#EFEFEF] bg-[#FFF] p-[40px] pb-[48px] min-w-[425px]'>
            <div
                className="cursor-pointer"
                onClick={() => setIsSendMsg(false)}
            >
                <ArrowRightS />
            </div>
            <p className='text-[#525252] mt-4 text-[18px] font-bold'>کد تایید را وارد نمایید</p>
            <p className='text-[#616161] mt-[24px] text-[14px] font-normal text-right'>
                کد تایید برای شماره 09013261200 ارسال شد.
            </p>
            <div className='mt-[32px] mb-[48px]'>
                <div className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6" dir='ltr'>
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                </div>
                <Button className="flex items-center justify-start gap-1">
                    <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
                    <ArrowLeftOrangeS />
                </Button>
            </div>
            <Button
                fullWidth
                variant='contained'
                onClick={() => setIsSendMsg(true)}
                className='!rounded-[8px] !bg-[#5559CE]'
            >تایید</Button>
        </div>
    )
}

export default SetCodePage