/**
* PartyAffiliationPill Component
*
* Tasteful party indicator pill using official Canadian party colors
* Respects visibility settings (public, followers, private)
*/
import { cn } from '@canadagpt/design-system';
type PartyAffiliation =
| 'Liberal'
| 'Conservative'
| 'NDP'
| 'Bloc Québécois'
| 'Green'
| 'Independent'
| string
| null;
type VisibilityLevel = 'public' | 'followers' | 'private';
interface PartyAffiliationPillProps {
party: PartyAffiliation;
visibility?: VisibilityLevel;
canView?: boolean;
className?: string;
}
// Official Canadian party colors from CLAUDE.md
const PARTY_COLORS: Record<string, { bg: string; text: string; border: string }> = {
Liberal: {
bg: 'bg-red-100 dark:bg-red-900/30',
text: 'text-red-700 dark:text-red-300',
border: 'border-red-300 dark:border-red-700',
},
Conservative: {
bg: 'bg-blue-100 dark:bg-blue-900/30',
text: 'text-blue-700 dark:text-blue-300',
border: 'border-blue-300 dark:border-blue-700',
},
NDP: {
bg: 'bg-amber-100 dark:bg-amber-900/30',
text: 'text-amber-700 dark:text-amber-300',
border: 'border-amber-300 dark:border-amber-700',
},
'Bloc Québécois': {
bg: 'bg-sky-100 dark:bg-sky-900/30',
text: 'text-sky-700 dark:text-sky-300',
border: 'border-sky-300 dark:border-sky-700',
},
Green: {
bg: 'bg-emerald-100 dark:bg-emerald-900/30',
text: 'text-emerald-700 dark:text-emerald-300',
border: 'border-emerald-300 dark:border-emerald-700',
},
Independent: {
bg: 'bg-gray-100 dark:bg-gray-800/50',
text: 'text-gray-600 dark:text-gray-400',
border: 'border-gray-300 dark:border-gray-600',
},
};
// Short display names
const PARTY_SHORT_NAMES: Record<string, string> = {
Liberal: 'LPC',
Conservative: 'CPC',
NDP: 'NDP',
'Bloc Québécois': 'BQ',
Green: 'GPC',
Independent: 'Ind.',
};
export function PartyAffiliationPill({
party,
visibility = 'public',
canView = true,
className,
}: PartyAffiliationPillProps) {
// Don't render if no party, private, or user can't view
if (!party || visibility === 'private' || !canView) {
return null;
}
// Get colors for the party (fallback to Independent styling for unknown parties)
const colors = PARTY_COLORS[party] || PARTY_COLORS.Independent;
const shortName = PARTY_SHORT_NAMES[party] || party;
return (
<span
className={cn(
'inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border',
colors.bg,
colors.text,
colors.border,
className
)}
title={party}
>
{shortName}
</span>
);
}
