import type { SystemStatusItem } from '@/types/admin';

const overallStatus = (items: SystemStatusItem[]) => {
    if (items.some((s) => s.status === 'degraded')) {
        return {
            text: 'Service Disruption',
            dot: 'bg-red-500 shadow-[0_0_6px_rgba(248,113,113,0.8)] dark:bg-red-400',
            pill: 'border-red-200 bg-red-50 text-red-700 dark:border-red-700/30 dark:bg-red-900/20 dark:text-red-400',
        };
    }
    if (items.some((s) => s.status === 'warning')) {
        return {
            text: 'Degraded Performance',
            dot: 'bg-amber-500 shadow-[0_0_6px_rgba(251,191,36,0.8)] dark:bg-amber-400',
            pill: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700/30 dark:bg-amber-900/20 dark:text-amber-400',
        };
    }
    return {
        text: 'All Systems Operational',
        dot: 'bg-emerald-500 shadow-[0_0_6px_rgba(52,211,153,0.8)] dark:bg-emerald-400',
        pill: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-700/30 dark:bg-emerald-900/20 dark:text-emerald-400',
    };
};

export default function HealthPill({
    systemStatus,
}: {
    systemStatus: SystemStatusItem[];
}) {
    const health = overallStatus(systemStatus);

    return (
        <div
            className={`flex items-center gap-2 rounded-full border px-3.5 py-1.5 ${health.pill}`}
        >
            <span
                className={`h-2 w-2 animate-pulse rounded-full ${health.dot}`}
            />
            <span className="text-xs font-semibold">{health.text}</span>
        </div>
    );
}