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