<template>
    <StatusCard title="Informations système" :icon="ServerIcon">
        <dl class="space-y-2">
            <div class="flex justify-between text-sm">
                <dt class="text-gray-500">Version PHP</dt>
                <dd class="font-medium text-gray-900 dark:text-white">{{ status.phpVersion }}</dd>
            </div>
            <div class="flex justify-between text-sm">
                <dt class="text-gray-500">Généré le</dt>
                <dd class="font-medium text-gray-900 dark:text-white">{{ formattedDate }}</dd>
            </div>
        </dl>
    </StatusCard>
</template>

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

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

const formattedDate = computed(() => {
    if (!props.status.generatedAt) return '';
    return new Date(props.status.generatedAt).toLocaleString('fr-FR');
});
</script>
