<template>
    <StatusCard title="Chapitres" :icon="DocumentTextIcon">
        <div class="flex items-baseline gap-2 mb-3">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalChapters }}</span>
            <span class="text-sm text-gray-500">total</span>
        </div>
        <div class="mb-1 flex justify-between text-xs text-gray-500">
            <span>{{ status.downloadedChapters }} téléchargés</span>
            <span>{{ downloadedPercent }}%</span>
        </div>
        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
            <div
                class="h-full bg-green-500 rounded-full transition-all"
                :style="{ width: downloadedPercent + '%' }" />
        </div>
        <p class="mt-1 text-xs text-gray-400">{{ status.pendingChapters }} en attente</p>
    </StatusCard>
</template>

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

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

const downloadedPercent = computed(() => {
    if (!props.status.totalChapters) return 0;
    return Math.round((props.status.downloadedChapters / props.status.totalChapters) * 100);
});
</script>
