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 {useTranslation} from 'react-i18next';
 7import {Popup} from 'react-leaflet';
 8import getMapsLink from '../../lib/getMapsLink';
 9import {Event} from '../../generated/graphql';
10
11interface Props {
12  event: Event & {id: string};
13}
14
15const EventPopup = ({event}: Props) => {
16  const {t} = useTranslation();
17
18  return (
19    <Popup>
20      <Card sx={{p: 2, width: '350px', maxWidth: '100%'}}>
21        <Box>
22          <Typography
23            variant="h3"
24            color="primary"
25            sx={{cursor: 'pointer', display: 'inline-block'}}
26          >
27            <Link
28              color="inherit"
29              href={`/e/${event.uuid}/details`}
30              sx={{textDecoration: 'none'}}
31            >
32              {event.name}
33            </Link>
34          </Typography>
35        </Box>
36        {!!event.date && (
37          <Box sx={{marginTop: 2}}>
38            <Typography variant="overline" color="GrayText">
39              {t('event.fields.date')}
40            </Typography>
41            <Typography variant="body1">
42              {moment(event.date).format('LL')}
43            </Typography>
44          </Box>
45        )}
46        {!!event.address && (
47          <Box sx={{marginTop: 2}}>
48            <Typography variant="overline" color="GrayText">
49              {t('event.fields.address')}
50            </Typography>
51            <Typography variant="body1" color="primary">
52              <Link
53                component="a"
54                target="_blank"
55                rel="noopener noreferrer"
56                href={getMapsLink(event.address)}
57                sx={{color: 'primary.main'}}
58              >
59                {event.address}
60              </Link>
61            </Typography>
62          </Box>
63        )}
64      </Card>
65    </Popup>
66  );
67};
68export default EventPopup;