/**
* VerifiedBadges Component
*
* Inline badge display for verified status (MP, Admin, Beta Tester)
* Displays badges as pills with icons next to user's name
*/
import { CheckCircle, Shield, FlaskConical } from 'lucide-react';
import { cn } from '@canadagpt/design-system';
interface VerifiedBadgesProps {
isVerifiedMp?: boolean;
isAdmin?: boolean;
isBetaTester?: boolean;
className?: string;
}
export function VerifiedBadges({
isVerifiedMp = false,
isAdmin = false,
isBetaTester = false,
className,
}: VerifiedBadgesProps) {
const badges = [];
if (isVerifiedMp) {
badges.push({
key: 'mp',
label: 'MP',
icon: CheckCircle,
bgColor: 'bg-blue-100 dark:bg-blue-900/40',
textColor: 'text-blue-700 dark:text-blue-300',
iconColor: 'text-blue-600 dark:text-blue-400',
});
}
if (isAdmin) {
badges.push({
key: 'admin',
label: 'Admin',
icon: Shield,
bgColor: 'bg-purple-100 dark:bg-purple-900/40',
textColor: 'text-purple-700 dark:text-purple-300',
iconColor: 'text-purple-600 dark:text-purple-400',
});
}
if (isBetaTester) {
badges.push({
key: 'beta',
label: 'Beta',
icon: FlaskConical,
bgColor: 'bg-emerald-100 dark:bg-emerald-900/40',
textColor: 'text-emerald-700 dark:text-emerald-300',
iconColor: 'text-emerald-600 dark:text-emerald-400',
});
}
if (badges.length === 0) {
return null;
}
return (
<div className={cn('flex items-center gap-1.5', className)}>
{badges.map((badge) => (
<span
key={badge.key}
className={cn(
'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
badge.bgColor,
badge.textColor
)}
>
<badge.icon className={cn('w-3 h-3', badge.iconColor)} />
{badge.label}
</span>
))}
</div>
);
}
