<template>
    <StatusCard title="Sources" :icon="GlobeAltIcon">
        <div class="flex items-baseline gap-2 mb-3">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalSources }}</span>
            <span class="text-sm text-gray-500">sources configurées</span>
        </div>
        <div class="flex flex-wrap gap-2">
            <span
                v-for="(count, health) in status.sourcesByHealth"
                :key="health"
                class="px-2 py-0.5 text-xs rounded-full"
                :class="healthBadgeClass(health)">
                {{ health }}: {{ count }}
            </span>
            <span v-if="!hasSources" class="text-xs text-gray-400">Aucune source</span>
        </div>
    </StatusCard>
</template>

<script setup>
import { computed } from 'vue';
import { GlobeAltIcon } from '@heroicons/vue/24/outline';
import StatusCard from './StatusCard.vue';

const props = defineProps({
    status: {
        type: Object,
        required: true,
    },
});

const hasSources = computed(() => Object.keys(props.status.sourcesByHealth ?? {}).length > 0);

function healthBadgeClass(health) {
    switch (health) {
        case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
        case 'unhealthy': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
        default: return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
    }
}
</script>
