/**
* MaritimeInset Component
* Enlarged view of Atlantic provinces for better visibility
*/
'use client';
import React from 'react';
import { useLocale } from 'next-intl';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { maritimeProvinces, getProvinceName } from '@/lib/visualizer/provinceData';
import { useSeatDataContext } from '@/contexts/SeatDataContext';
import { getPartyColor, partyAbbreviations } from '@/lib/visualizer/partyColors';
export function MaritimeInset() {
const { showMaritimeInset, selectedProvince, setSelectedProvince, setHoveredProvince } = useVisualizerStore();
const { getSeatBreakdown } = useSeatDataContext();
const locale = useLocale() as 'en' | 'fr';
if (!showMaritimeInset) return null;
return (
<div className="absolute top-4 right-4 bg-bg-primary/95 backdrop-blur border border-border-subtle rounded-lg p-3 shadow-lg min-w-40">
<h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wide mb-2">
{locale === 'fr' ? 'Provinces atlantiques' : 'Atlantic Provinces'}
</h3>
<div className="space-y-2">
{maritimeProvinces.map(code => {
const provinceName = getProvinceName(code, locale);
const seatBreakdown = getSeatBreakdown(code);
const isSelected = selectedProvince === code;
return (
<div
key={code}
onClick={() => setSelectedProvince(isSelected ? null : code, 'map')}
onMouseEnter={() => setHoveredProvince(code)}
onMouseLeave={() => setHoveredProvince(null)}
className={`
p-2 rounded cursor-pointer transition-colors
${isSelected ? 'bg-accent-red/20 border border-accent-red/50' : 'hover:bg-bg-elevated'}
`}
>
<div className="font-medium text-text-primary text-sm mb-1">
{provinceName}
</div>
<div className="flex flex-wrap gap-1">
{seatBreakdown.map(({ party, seats }) => (
<span
key={party}
className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
style={{ backgroundColor: `${getPartyColor(party)}20` }}
>
<span
className="w-2 h-2 rounded-sm"
style={{ backgroundColor: getPartyColor(party) }}
/>
<span className="text-text-secondary">
{partyAbbreviations[party]?.charAt(0) || party.charAt(0)}: {seats}
</span>
</span>
))}
</div>
</div>
);
})}
</div>
</div>
);
}
