import React from 'react';
import { SvgLoader, SvgProxy } from 'react-svgmt';

export default function Map({ highlighted }) {
	return (
		<div>
			<SvgLoader
				path='/belgium-map.svg'
				style={{
					width: '500px',
					height: '500px',
				}}
			>
				<SvgProxy selector='.ghent' fill={highlighted.ghent} />
				<SvgProxy selector='.brussels' fill={highlighted.brussels} />
				<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />
				<SvgProxy selector='.tournai' fill={highlighted.tournai} />
				<SvgProxy selector='.mechelen' fill={highlighted.mechelen} />
				<SvgProxy selector='.bruges' fill={highlighted.bruges} />
				<SvgProxy selector='.mons' fill={highlighted.mons} />
				<SvgProxy selector='.liege' fill={highlighted.liege} />
				<SvgProxy selector='.namur' fill={highlighted.namur} />
				<SvgProxy selector='.arlon' fill={highlighted.arlon} />
			</SvgLoader>
		</div>
	);
}