1import {Drawer, Typography, useMediaQuery, Link, Box} from '@mui/material';
 2import {useTranslation} from 'react-i18next';
 3import DrawerPassengerHeader from './DrawerPassengerHeader';
 4
 5interface Props {
 6  isOpen: boolean;
 7  onClose: () => void;
 8  firstName: string;
 9  lastName: string;
10  email: string;
11  phone?: string;
12}
13
14const DrawerPassenger = ({
15  isOpen,
16  onClose,
17  lastName,
18  firstName,
19  email,
20  phone,
21}: Props) => {
22  const {t} = useTranslation();
23  const isMobile = useMediaQuery('(max-width:400px)');
24
25  return (
26    <Drawer
27      anchor="right"
28      open={isOpen}
29      onClose={onClose}
30      sx={{
31        height: 'auto',
32        '& .MuiDrawer-paper': {
33          width: isMobile ? '100%' : '375px',
34          maxWidth: '100%',
35        },
36      }}
37    >
38      <Box bgcolor="background.default" sx={{height: '100%', overflow: 'auto'}}>
39        <DrawerPassengerHeader isMobile={isMobile} onClose={onClose} />
40        <Box
41          display="flex"
42          flexDirection="column"
43          gap={2}
44          bgcolor="white"
45          padding={2}
46        >
47          <Box display="flex" flexDirection="column">
48            <Typography variant="h6">
49              {t('passenger.informations.name.label')}
50            </Typography>
51            <Typography variant="body1" gutterBottom>
52              {firstName}
53            </Typography>
54          </Box>
55          <Box display="flex" flexDirection="column">
56            <Typography variant="h6">
57              {t('passenger.informations.surname.label')}
58            </Typography>
59            <Typography variant="body1" gutterBottom>
60              {lastName}
61            </Typography>
62          </Box>
63          <Box display="flex" flexDirection="column">
64            <Typography variant="h6">
65              {t('passenger.informations.email.label')}
66            </Typography>
67            <Link
68              sx={{display: 'flex', flexDirection: 'row', gap: 1}}
69              href={`mailto:${email}`}
70            >
71              {email}
72            </Link>
73          </Box>
74          <Box display="flex" flexDirection="column">
75            <Typography variant="h6">
76              {t('passenger.informations.phone.label')}
77            </Typography>
78            {phone ? (
79              <Link
80                sx={{display: 'flex', flexDirection: 'row', gap: 1}}
81                href={`tel:${phone}`}
82              >
83                {phone}
84              </Link>
85            ) : (
86              <Typography variant="body1">
87                {t('passenger.informations.notSpecify')}
88              </Typography>
89            )}
90          </Box>
91        </Box>
92      </Box>
93    </Drawer>
94  );
95};
96
97export default DrawerPassenger;