<template>
    <dl class="hidden md:flex items-center divide-x divide-zinc-300">
        <div v-for="stat in stats" :key="stat.label" class="px-8 first:pl-0 last:pr-0">
            <dt class="sr-only">{{ stat.label }}</dt>
            <dd>
                <span class="block font-serif text-2xl text-zinc-900 leading-none">{{ stat.value }}</span>
                <span class="block font-mono text-[11px] uppercase tracking-widest text-zinc-500 mt-1.5">{{ stat.label }}</span>
            </dd>
        </div>
    </dl>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    stationCount: { type: Number, default: null },
})

const stats = computed(() => [
    {
        value: props.stationCount ? props.stationCount.toLocaleString('en-GB') : '11,482',
        label: 'Stations tracked',
    },
    { value: '£8.40', label: 'Avg saving per tank*' },
    { value: '84%', label: 'Forecast accuracy' },
])
</script>
