import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA"
import TickCircleGreenA from "@/components/icons/TickCircleGreenA"
import { Button } from "@mui/material"
import Link from "next/link"

function SuccessPay({ setStep }) {
    return (
        <div className='w-full lg:w-[59%]'>
            <div
                className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
            >
                <div className="pt-[8px] pb-[4px] grid place-items-center">
                    <div className="flex flex-col justify-center items-center gap-[14px]">
                        <TickCircleGreenA />
                        <p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
                    </div>
                    <p
                        className="text-[#3B3B3B] text-[16px] font-normal 
                mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] 
                mb-[24px] md:mb-[16px]"
                    >برای نمایش نوبت ها به قسمت نوبت های من بروید.  </p>
                    <div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
                        <span className="w-full block h-px bg-[#EFEFEF]"></span>
                        <div className="flex items-center justify-between my-[20px] gap-[80px]">
                            <p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
                            <p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
                        </div>
                        <span className="w-full block h-px bg-[#EFEFEF]"></span>
                    </div>
                    <Link href='/dashboard'>
                        <Button
                            variant="text"
                            className="!flex !items-center !justify-center !gap-[4px]"
                        >
                            <p className="text-[16px] font-medium text-[#5559CE]">برو به نوبت های من</p>
                            <ArrowLeftBlueA />
                        </Button>
                    </Link>
                </div>
            </div>
        </div>
    )
}

export default SuccessPay