import {Box, Container, Divider, Grid, Paper, Stack, Typography} from '@mui/material';

const PrintablePage = ({children, header, footer}) => (
    <>
        <Box sx={{width: "100%", height: 8, displayPrint: 'none'}}/>
        <Container
            sx={{
                width: '21cm',
                minHeight: '29.7cm',
                margin: '0 auto',
                backgroundColor: 'white',
                p: '16px !important',
                pb: footer ? '84px!important' : '',
                position: 'relative'
            }}
            component="article" maxWidth="false">
            <Grid container columns={5} sx={{pt: 2, px: 4, display: header ? '' : 'none'}}>
                <Grid item xs={1}>
                    <Box sx={{width: 70}}>
                        <Box component={'img'} sx={{width: '100%', height: '100%', objectFit: 'contain'}}
                             src={'/images/logo.png'}/>
                    </Box>
                </Grid>
                <Grid item xs={3} sx={{textAlign: 'center'}}>
                    <Typography sx={{fontFamily: 'Bnazanin'}}>باسمه تعالی</Typography>
                    <Typography sx={{fontFamily: 'Bnazanin'}}>جمهوری اسلامی ایران</Typography>
                    <Typography sx={{fontFamily: 'Bnazanin', fontWeight: 'bold'}}>وزارت راه و
                        شهرسازی</Typography>
                    <Typography sx={{fontFamily: 'Bnazanin', fontWeight: 'bold'}}>سازمان
                        راهداری و حمل و نقل جاده
                        ای</Typography>
                </Grid>
                <Grid item xs={1}>
                    <Stack>
                        <Typography sx={{fontFamily: 'Bnazanin'}}>شماره:</Typography>
                        <Typography sx={{fontFamily: 'Bnazanin'}}>تاریخ:</Typography>
                        <Typography sx={{fontFamily: 'Bnazanin'}}>پیوست:</Typography>
                    </Stack>
                </Grid>
            </Grid>
            <Paper elevation={0} sx={{px: 8}}>
                {children}
            </Paper>
            <Box sx={{
                position: 'absolute',
                bottom: 0,
                left: 0,
                width: '100%',
                px: 4,
                pb: 2,
                display: footer ? '' : 'none'
            }}>
                <Divider sx={{borderStyle: 'double', borderBottomWidth: 3, borderColor: '#000'}}/>
                <Stack sx={{my: .5}}>
                    <Box sx={{textAlign: 'center'}}>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 1}}> آدرس: تهران-بلوار
                            کشاورز-خیابان فلسطین جنوبی-خیابان
                            دمشق-پلاک17 </Typography>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 1}}> تلفن: 88-88804379 </Typography>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 1}}> تلفن گویا: 88804400 </Typography>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 1}}> کدپستی: 1416753941 </Typography>
                    </Box>
                    <Box sx={{textAlign: 'center'}}>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 2}}>صندوق پستی: 3773-14155</Typography>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 2}}>پست الکترونیک: info@rmto.ir</Typography>
                        <Typography variant={'caption'} fontWeight={'bold'} component={'span'}
                                    sx={{fontFamily: 'Bnazanin', px: 2}}>سایت الکترونیک: www.rmto.ir</Typography>
                    </Box>
                </Stack>
            </Box>
        </Container>
        <Box sx={{width: "100%", height: 8, displayPrint: 'none'}}/>
    </>
);

export default PrintablePage;