/**
* SeatLegend Component
* Party color legend for the Canada Visualizer
*/
'use client';
import React from 'react';
import { partyColors, partyAbbreviations } from '@/lib/visualizer';
import { useSeatDataContext } from '@/contexts/SeatDataContext';
interface SeatLegendProps {
showCounts?: boolean;
}
export function SeatLegend({ showCounts = true }: SeatLegendProps) {
const { nationalTotals } = useSeatDataContext();
// Order parties by seat count
const sortedParties = Object.entries(partyColors)
.filter(([party]) => party !== 'Independent')
.map(([party, color]) => ({
party,
color,
abbreviation: partyAbbreviations[party] || party,
seats: nationalTotals[party] || 0,
}))
.sort((a, b) => b.seats - a.seats);
return (
<div className="flex flex-nowrap justify-center gap-2 sm:gap-4 text-xs sm:text-sm overflow-x-auto">
{sortedParties.map(({ party, color, abbreviation, seats }) => (
<div key={party} className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
<div
className="w-3 h-3 sm:w-4 sm:h-4 rounded-sm border border-border-subtle flex-shrink-0"
style={{ backgroundColor: color }}
/>
<span className="text-text-secondary whitespace-nowrap">
<span className="hidden sm:inline">{party}</span>
<span className="sm:hidden">{abbreviation}</span>
{showCounts && (
<span className="font-semibold text-text-primary ml-0.5 sm:ml-1">
{seats}
</span>
)}
</span>
</div>
))}
</div>
);
}
