1import {Drawer, Typography, useMediaQuery, Link, Box} from '@mui/material';
  2import {useTranslation} from 'react-i18next';
  3import {
  4  CountryIso2,
  5} from 'react-international-phone';
  6import DrawerPassengerHeader from './DrawerPassengerHeader';
  7import { getFormatedPhoneNumber } from '../../lib/phoneNumbers';
  8
  9interface Props {
 10  isOpen: boolean;
 11  onClose: () => void;
 12  firstName: string;
 13  lastName: string;
 14  email: string;
 15  phone?: string;
 16  phoneCountry?: '' | CountryIso2;
 17}
 18
 19
 20
 21const DrawerPassenger = ({
 22  isOpen,
 23  onClose,
 24  lastName,
 25  firstName,
 26  email,
 27  phone,
 28  phoneCountry,
 29}: Props) => {
 30  const {t} = useTranslation();
 31  const isMobile = useMediaQuery('(max-width:400px)');
 32
 33  return (
 34    <Drawer
 35      anchor="right"
 36      open={isOpen}
 37      onClose={onClose}
 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          <Box display="flex" flexDirection="column">
 72            <Typography variant="h6">
 73              {t('passenger.informations.email.label')}
 74            </Typography>
 75            <Link
 76              sx={{display: 'flex', flexDirection: 'row', gap: 1}}
 77              href={`mailto:${email}`}
 78            >
 79              {email}
 80            </Link>
 81          </Box>
 82          <Box display="flex" flexDirection="column">
 83            <Typography variant="h6">
 84              {t('passenger.informations.phone.label')}
 85            </Typography>
 86            {phone ? (
 87              <Link
 88                sx={{display: 'flex', flexDirection: 'row', gap: 1}}
 89                href={`tel:${phone}`}
 90              >
 91                {getFormatedPhoneNumber({phone, phoneCountry})}
 92              </Link>
 93            ) : (
 94              <Typography variant="body1">
 95                {t('passenger.informations.notSpecify')}
 96              </Typography>
 97            )}
 98          </Box>
 99        </Box>
100      </Box>
101    </Drawer>
102  );
103};
104
105export default DrawerPassenger;