import { cn } from '@/lib/utils';
import { AlertTriangle, Info, ShieldAlert } from 'lucide-react';

type Severity = 'info' | 'warning' | 'critical';

const CONFIG: Record<
    Severity,
    {
        icon: React.ComponentType<{ className?: string }>;
        label: string;
        cls: string;
        dot: string;
    }
> = {
    info: {
        icon: Info,
        label: 'Info',
        cls: 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border border-blue-500/20',
        dot: 'bg-blue-500',
    },
    warning: {
        icon: AlertTriangle,
        label: 'Warning',
        cls: 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-500/20',
        dot: 'bg-amber-500',
    },
    critical: {
        icon: ShieldAlert,
        label: 'Critical',
        cls: 'bg-red-500/10 text-red-700 dark:text-red-400 border border-red-500/20',
        dot: 'bg-red-500',
    },
};

interface Props {
    severity: string;
    dot?: boolean;
    className?: string;
}

export function SeverityBadge({ severity, dot = false, className }: Props) {
    const cfg = CONFIG[severity as Severity] ?? CONFIG.info;
    const Icon = cfg.icon;

    if (dot) {
        return (
            <span
                className={cn(
                    'flex h-2.5 w-2.5 rounded-full',
                    cfg.dot,
                    className,
                )}
                title={cfg.label}
            />
        );
    }

    return (
        <span
            className={cn(
                'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold',
                cfg.cls,
                className,
            )}
        >
            <Icon className="h-3 w-3" />
            {cfg.label}
        </span>
    );
}