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