import ArrowLeftB from "@/components/icons/ArrowLeftB";
import { Button } from "@mui/material";
import ButtonFixed from "./ButtonFixed";

function Paying({ setTypePay, fadeElement, setStep }) {
  return (
    <div className="w-full lg:w-[59%]">
      <div
        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
      >
        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
          اطلاعات پرداخت
        </p>
        <div className="flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
          <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
            مبلغ پیش پرداخت (بیعانه) :{" "}
          </p>
          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
            20،000 تومان
          </p>
        </div>
        <span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
        <ButtonFixed>
          <div className="flex items-center justify-between gap-2">
            <p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
              مبلغ قابل پرداخت : 20،000 تومان
            </p>
            <Button
              className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
              onClick={() => setStep((prev) => prev + 1)}
              variant="contained"
            >
              <p className="text-[#EFEFEF] text-[16px] font-medium">
                پرداخت نهایی
              </p>
              <ArrowLeftB />
            </Button>
          </div>
        </ButtonFixed>
      </div>
    </div>
  );
}

export default Paying;