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

function Paying({ setTypePay, fadeElement }) {
    return (
        <>
            <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={() => fadeElement(() => setTypePay('success'))}
                        variant="contained"
                    >
                        <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
                        <ArrowLeftB />
                    </Button>
                </div>
            </ButtonFixed>
        </>
    )
}

export default Paying