<template>
    <StatusCard title="Mangas" :icon="BookOpenIcon">
        <div class="flex items-baseline gap-2 mb-3">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalMangas }}</span>
            <span class="text-sm text-gray-500">total</span>
            <span class="ml-auto text-sm text-blue-600 dark:text-blue-400">{{ status.monitoredMangas }} suivis</span>
        </div>
        <div class="flex flex-wrap gap-2">
            <span
                v-for="(count, label) in status.mangasByStatus"
                :key="label"
                class="px-2 py-0.5 text-xs rounded-full border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400">
                {{ label }}: {{ count }}
            </span>
            <span v-if="!hasStatuses" class="text-xs text-gray-400">Aucun statut disponible</span>
        </div>
    </StatusCard>
</template>

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

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

const hasStatuses = computed(() => Object.keys(props.status.mangasByStatus ?? {}).length > 0);
</script>
