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

function Paying({ setTypePay, fadeElement }) {
    return (
        <>
            <p className="text-[#3B3B3B] text-[20px] font-bold">
                اطلاعات پرداخت
            </p>
            <div className='flex justify-between items-center mt-[30px]'>
                <p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
                <p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
            </div>
            <span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
            <div className='flex items-center justify-between'>
                <p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
                <Button
                    className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
                    onClick={() => fadeElement(() => setTypePay('success'))}
                    variant="contained"
                >
                    <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
                    <ArrowLeftB />
                </Button>
            </div>
        </>
    )
}

export default Paying