1import moment from 'moment';
 2import Card from '@mui/material/Card';
 3import Typography from '@mui/material/Typography';
 4import Link from '@mui/material/Link';
 5import Box from '@mui/material/Box';
 6import {TravelEntity} from '../../generated/graphql';
 7import {Popup} from 'react-leaflet';
 8import {useTranslation} from 'react-i18next';
 9import getMapsLink from '../../lib/getMapsLink';
10
11interface Props {
12  travel: TravelEntity;
13}
14
15const TravelPopup = ({travel}: Props) => {
16  const {t} = useTranslation();
17  return (
18    <Popup>
19      <Card sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}>
20        {!!travel.attributes.departureDate && (
21          <Typography variant="overline" color="Graytext" id="TravelDeparture">
22            {moment(travel.attributes.departureDate).format('dddd LL')}{' '}
23            {travel.attributes.departureTime || ''}
24          </Typography>
25        )}
26        <Box>
27          <Typography variant="h5">{travel.attributes.vehicleName}</Typography>
28        </Box>
29        {!!travel.attributes.phone_number && (
30          <Box sx={{marginTop: 2}}>
31            <Typography variant="overline" color="GrayText">
32              {t('travel.fields.phone')}
33            </Typography>
34            <Typography variant="body1">
35              {travel.attributes.phone_number}
36            </Typography>
37          </Box>
38        )}
39        {!!travel.attributes.meeting && (
40          <Box sx={{marginTop: 2}}>
41            <Typography variant="overline" color="GrayText">
42              {t('travel.fields.meeting_point')}
43            </Typography>
44            <Typography variant="body1" color="primary">
45              <Link
46                component="a"
47                target="_blank"
48                rel="noopener noreferrer"
49                href={getMapsLink(travel.attributes.meeting)}
50                onClick={e => e.stopPropagation()}
51                sx={{color: 'primary.main'}}
52              >
53                {travel.attributes.meeting}
54              </Link>
55            </Typography>
56          </Box>
57        )}
58      </Card>
59    </Popup>
60  );
61};
62export default TravelPopup;