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