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
64          <Box display="flex" flexDirection="column">
65            <Typography variant="h6">
66              {t('passenger.informations.email.label')}
67            </Typography>
68            <Link
69              sx={{display: 'flex', flexDirection: 'row', gap: 1}}
70              href={`mailto:${email}`}
71            >
72              {email}
73            </Link>
74          </Box>
75          <Box display="flex" flexDirection="column">
76            <Typography variant="h6">
77              {t('passenger.informations.phone.label')}
78            </Typography>
79            {phone ? (
80              <Link
81                sx={{display: 'flex', flexDirection: 'row', gap: 1}}
82                href={`tel:${phone}`}
83              >
84                {phone}
85              </Link>
86            ) : (
87              <Typography variant="body1">
88                {t('passenger.informations.notSpecify')}
89              </Typography>
90            )}
91          </Box>
92        </Box>
93      </Box>
94    </Drawer>
95  );
96};
97
98export default DrawerPassenger;