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