/**
* MPConfirmationCard Component
*
* Displays a found MP profile during signup for user confirmation.
* Shows MP photo, name, party, and riding with Yes/No buttons.
*/
'use client';
import { Loader2, CheckCircle } from 'lucide-react';
import { AuthButton } from './AuthButton';
export interface MPForConfirmation {
parl_mp_id: number;
name: string;
party: string;
riding: string;
photo_url?: string;
}
interface MPConfirmationCardProps {
mp: MPForConfirmation;
onConfirm: () => void;
onReject: () => void;
loading?: boolean;
}
const PARTY_COLORS: Record<string, string> = {
Liberal: 'bg-red-100 text-red-800 border-red-200',
Conservative: 'bg-blue-100 text-blue-800 border-blue-200',
NDP: 'bg-orange-100 text-orange-800 border-orange-200',
'Bloc Québécois': 'bg-sky-100 text-sky-800 border-sky-200',
Green: 'bg-emerald-100 text-emerald-800 border-emerald-200',
Independent: 'bg-gray-100 text-gray-800 border-gray-200',
};
export function MPConfirmationCard({
mp,
onConfirm,
onReject,
loading = false,
}: MPConfirmationCardProps) {
const partyColorClass = PARTY_COLORS[mp.party] || PARTY_COLORS.Independent;
return (
<div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
<div className="flex items-center gap-2 mb-4">
<CheckCircle className="text-blue-600" size={20} />
<h3 className="font-semibold text-blue-900">
Parliamentary email detected
</h3>
</div>
<p className="text-blue-800 text-sm mb-4">
Is this your MP profile?
</p>
<div className="bg-white border border-blue-200 rounded-lg p-4 mb-4">
<div className="flex items-center gap-4">
{mp.photo_url ? (
<img
src={mp.photo_url}
alt={mp.name}
className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
/>
) : (
<div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
<span className="text-2xl text-gray-500">
{mp.name.charAt(0)}
</span>
</div>
)}
<div className="flex-1">
<h4 className="font-bold text-gray-900 text-lg">{mp.name}</h4>
<p className="text-gray-600 text-sm">{mp.riding}</p>
<span
className={`inline-block mt-1 px-2 py-0.5 text-xs font-medium rounded-full border ${partyColorClass}`}
>
{mp.party}
</span>
</div>
</div>
</div>
<p className="text-xs text-blue-700 mb-4">
Your MP status will be verified when you confirm your email.
</p>
<div className="flex gap-3">
<AuthButton
type="button"
variant="primary"
onClick={onConfirm}
disabled={loading}
fullWidth
className="bg-blue-600 hover:bg-blue-700"
>
{loading ? (
<>
<Loader2 className="animate-spin" size={18} />
Confirming...
</>
) : (
"Yes, this is me"
)}
</AuthButton>
<AuthButton
type="button"
variant="outline"
onClick={onReject}
disabled={loading}
fullWidth
>
No, this isn't me
</AuthButton>
</div>
</div>
);
}
