/**
* ProvinceLabels Component
* Overlay labels on the Canada map showing province codes and data
*/
'use client';
import React from 'react';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { provinceCodes, provinceLabelPositions, shortLabels } from '@/lib/visualizer/provinceData';
export interface ProvinceLabelData {
[provinceCode: string]: string | number | undefined;
}
interface ProvinceLabelsProps {
/** Data to display under each province label (e.g., percentages, counts) */
labelData?: ProvinceLabelData;
/** Format function to transform the data value into a display string */
formatValue?: (value: string | number | undefined, provinceCode: string) => string;
}
const defaultFormat = (value: string | number | undefined): string => {
if (value === undefined || value === null) return '';
if (typeof value === 'number') {
return `${value.toFixed(2)}%`;
}
return String(value);
};
export function ProvinceLabels({ labelData, formatValue = defaultFormat }: ProvinceLabelsProps) {
const { showLabels, selectedProvince, setSelectedProvince, setHoveredProvince } = useVisualizerStore();
if (!showLabels) return null;
return (
<div className="absolute inset-0 pointer-events-none overflow-hidden">
{provinceCodes.map(code => {
const position = provinceLabelPositions[code];
if (!position) return null;
const isSelected = selectedProvince === code;
const value = labelData?.[code];
const displayValue = formatValue(value, code);
return (
<div
key={code}
className="absolute transform -translate-x-1/2 -translate-y-1/2 pointer-events-auto cursor-pointer"
style={{
left: `${position.x}%`,
top: `${position.y}%`,
}}
onClick={() => setSelectedProvince(isSelected ? null : code, 'map')}
onMouseEnter={() => setHoveredProvince(code)}
onMouseLeave={() => setHoveredProvince(null)}
>
<div
className={`
flex flex-col items-center gap-0.5 px-1.5 py-1 rounded
bg-black/60 backdrop-blur-sm
transition-all duration-200
${isSelected ? 'ring-2 ring-yellow-400 bg-black/80' : 'hover:bg-black/80'}
`}
>
<span className="text-white font-bold text-xs leading-none">
{shortLabels[code]}
</span>
{displayValue && (
<span className="text-white/80 text-[10px] leading-none">
{displayValue}
</span>
)}
</div>
</div>
);
})}
</div>
);
}
