<template>
    <StatusCard title="Stockage" :icon="CircleStackIcon">
        <div class="flex items-baseline gap-2 mb-3">
            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.storageUsedHuman }}</span>
            <span class="text-sm text-gray-500">utilisés</span>
        </div>
        <div class="mb-1 flex justify-between text-xs text-gray-500">
            <span>{{ status.storageFreeHuman }} libres</span>
            <span>{{ usedPercent }}%</span>
        </div>
        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
            <div
                class="h-full rounded-full transition-all"
                :class="usedPercent > 90 ? 'bg-red-500' : 'bg-blue-500'"
                :style="{ width: usedPercent + '%' }" />
        </div>
        <p class="mt-1 text-xs text-gray-400">Total : {{ status.storageTotalHuman }}</p>
        <p class="mt-1 text-xs text-gray-400 truncate" :title="status.storagePath">{{ status.storagePath }}</p>
    </StatusCard>
</template>

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

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

const diskUsedBytes = computed(() => props.status.storageTotalBytes - props.status.storageFreeBytes);

const usedPercent = computed(() => {
    if (!props.status.storageTotalBytes) return 0;
    return Math.round((diskUsedBytes.value / props.status.storageTotalBytes) * 100);
});
</script>
