1import {CircleMarker} from 'react-leaflet';
 2import {useTheme} from '@mui/material';
 3import EventPopup from './EventPopup';
 4import {Event} from '../../generated/graphql';
 5
 6interface Props {
 7  event: Event & {id: string};
 8}
 9
10const EventMarker = ({event}: Props) => {
11  const {latitude, longitude} = event;
12  const theme = useTheme();
13
14  const markerStyle = {
15    radius: 12,
16    fillColor: theme.palette.primary.main,
17    color: theme.palette.background.paper,
18    fillOpacity: 1,
19    opacity: 1,
20    weight: 3,
21  };
22
23  return (
24    <CircleMarker {...markerStyle} radius={9} center={[latitude, longitude]}>
25      <CircleMarker
26        {...{
27          ...markerStyle,
28          fillColor: markerStyle.color,
29          color: markerStyle.fillColor,
30        }}
31        center={[latitude, longitude]}
32      ></CircleMarker>
33      <EventPopup event={event} />
34    </CircleMarker>
35  );
36};
37
38export default EventMarker;