import Link from "next/link";
import { Button } from "@mui/material";
import RedoA from "@/components/icons/RedoA";
import RefreshA from "@/components/icons/RefreshA";
import InfoCircleRedA from "@/components/icons/InfoCircleRedA";

function FailedPay({ setStep, fadeElement }) {
  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="mt-[7px]">
          <div className="flex flex-col justify-center items-center gap-[14px]">
            <InfoCircleRedA />
            <p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
              پرداخت شما انجام نشد.
            </p>
          </div>
          <div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
            <Link href="/">
              <Button
                variant="outlined"
                className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
              >
                <RedoA />
                <p className="text-[#5559CE] text-[16px] font-medium">
                  صفحه اصلی
                </p>
              </Button>
            </Link>
            <Button
              variant="contained"
              onClick={() => setStep((prev) => prev - 2)}
              className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
            >
              <RefreshA />
              <p className="text-[#FAFAFA] text-[16px] font-medium">
                تلاش دوباره
              </p>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FailedPay;