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 text-center mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] mb-[24px] md:mb-[16px]"
          >
            نوبت شما تأیید شد و پیامک تأیید برای بیمار ارسال می‌شود. برای نمایش نوبت‌ها به قسمت نوبت‌های من بروید.{" "}
          </p>
          <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;