type BadgeProps = {
    label: string;
    color?: string;
    className?: string;
};

export function Badge({ label, color = 'bg-zinc-700', className = '' }: BadgeProps) {
    return (
        <span
            className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium text-white ${color} ${className}`}
        >
            {label}
        </span>
    );
}

export function StatusBadge({ status }: { status: string }) {
    const map: Record<string, { color: string; label: string }> = {
        connected: { color: 'bg-green-600', label: 'Connected' },
        failed: { color: 'bg-red-600', label: 'Failed' },
        'needs-auth': { color: 'bg-yellow-600', label: 'Needs auth' },
        unknown: { color: 'bg-zinc-600', label: 'Unknown' },
    };
    const { color, label } = map[status] ?? map.unknown;
    return <Badge label={label} color={color} />;
}