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