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