import InfoCircleRedA from "@/components/icons/InfoCircleRedA"
import RedoA from "@/components/icons/RedoA"
import RefreshA from "@/components/icons/RefreshA"
import { Button } from "@mui/material"

function FailedPay({ setTypePay, setIsPay, fadeElement }) {
    return (
        <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]">
                <Button
                    variant="outlined"
                    onClick={() => fadeElement(() => setIsPay(false))}
                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
                >
                    <RedoA />
                    <p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
                </Button>
                <Button
                    variant="contained"
                    onClick={() => fadeElement(() => setTypePay('default'))}
                    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>
    )
}

export default FailedPay