import { DetailedHTMLProps, HTMLAttributes } from 'react';
import { styled, Theme } from '@mui/material';
import { alpha, MUIStyledCommonProps } from '@mui/system';

export type MapWrapperProps = MUIStyledCommonProps<Theme> &
	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

const MapWrapper = styled('div')(({ theme }) => ({
	border: `solid 1px ${alpha(theme.palette.grey[500], 0.32)}`,
	position: 'relative',
	borderRadius: theme.shape.borderRadius,
	overflow: 'hidden',
	'&.error': {
		borderColor: theme.palette.error.main
	},
	'& .map-container': {
		height: 264,
		boxShadow: theme.shadows[0]
	},
	'& .leaflet-container': {
		backgroundColor: theme.palette.background.default
	},
	...(theme.palette.mode === 'dark' && {
		'& .leaflet-layer': {
			filter: 'invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)'
		}
	})
}));

export default MapWrapper;