import { cn, getStatusDot } from '@/lib/utils';

export function StatusBadge({ status, className }) {
    const variants = {
        online:   'bg-green-500/15 text-green-400 border-green-500/30',
        running:  'bg-cyan-500/15 text-cyan-400 border-cyan-500/30',
        active:   'bg-green-500/15 text-green-400 border-green-500/30',
        stopped:  'bg-slate-500/15 text-slate-400 border-slate-500/30',
        offline:  'bg-red-500/15 text-red-400 border-red-500/30',
        error:    'bg-red-500/15 text-red-400 border-red-500/30',
        warning:  'bg-yellow-500/15 text-yellow-400 border-yellow-500/30',
        unknown:  'bg-gray-500/15 text-gray-400 border-gray-500/30',
        paused:   'bg-yellow-500/15 text-yellow-400 border-yellow-500/30',
        exited:   'bg-slate-500/15 text-slate-400 border-slate-500/30',
        success:  'bg-green-500/15 text-green-400 border-green-500/30',
        failed:   'bg-red-500/15 text-red-400 border-red-500/30',
        pending:  'bg-blue-500/15 text-blue-400 border-blue-500/30',
        queued:   'bg-purple-500/15 text-purple-400 border-purple-500/30',
    };

    const variant = variants[status?.toLowerCase()] ?? variants.unknown;
    const dot = getStatusDot(status);

    return (
        <span className={cn(
            'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border',
            variant,
            className
        )}>
            <span className={cn('w-1.5 h-1.5 rounded-full', dot)} />
            {status}
        </span>
    );
}