/**
* Province Component
* Individual province with party-colored fill
*/
'use client';
import React from 'react';
interface ProvinceProps {
code: string;
fill: string;
isSelected: boolean;
isHovered: boolean;
onClick: () => void;
onMouseEnter: () => void;
onMouseLeave: () => void;
}
export function Province({
code,
fill,
isSelected,
isHovered,
onClick,
onMouseEnter,
onMouseLeave,
}: ProvinceProps) {
// This component wraps the province group in the SVG
// The actual province paths are in the SVG file with IDs like #BC, #AB, etc.
// We apply styles via CSS to the groups
return (
<style jsx global>{`
#${code} {
cursor: pointer;
transition: all 0.2s ease;
}
#${code} polygon,
#${code} path,
#${code} .cls-1,
#${code} .cls-2,
#${code} .cls-3,
#${code} .cls-4 {
fill: ${fill} !important;
transition: all 0.2s ease;
}
#${code}:hover polygon,
#${code}:hover path,
#${code}:hover .cls-1,
#${code}:hover .cls-2,
#${code}:hover .cls-3,
#${code}:hover .cls-4 {
filter: brightness(1.15);
}
${isSelected ? `
#${code} polygon,
#${code} path,
#${code} .cls-1,
#${code} .cls-2,
#${code} .cls-3,
#${code} .cls-4 {
stroke: #FFD700 !important;
stroke-width: 3px !important;
filter: brightness(1.1);
}
` : ''}
`}</style>
);
}
