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