<template>
    <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300 hover:border-accent transition-colors">
        <div class="flex items-center gap-3 min-w-0">
            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
                <iconify-icon
                    :icon="station.is_supermarket ? 'lucide:shopping-cart' : 'lucide:fuel'"
                    style="font-size:1.25rem"
                    class="text-accent"
                ></iconify-icon>
            </div>
            <div class="min-w-0">
                <p class="font-bold text-zinc-800 truncate">{{ station.name }}</p>
                <p class="text-xs text-zinc-500">{{ station.distance_km.toFixed(1) }} km away · Updated {{ updatedAgo }}</p>
            </div>
        </div>
        <div class="text-right flex-shrink-0 ml-4">
            <p class="text-xl font-black" :class="priceColor">{{ station.price }}p</p>
        </div>
    </div>
</template>

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

const props = defineProps({
    station: { type: Object, required: true },
    lowestPrice: { type: Number, default: null },
})

const priceColor = computed(() => {
    if (!props.lowestPrice) return 'text-zinc-800'
    if (props.station.price_pence === props.lowestPrice) return 'text-status-good'
    if (props.station.price_pence > props.lowestPrice + 500) return 'text-status-bad'
    return 'text-zinc-800'
})

const updatedAgo = computed(() => {
    const updated = new Date(props.station.price_updated_at)
    const diff = Math.floor((Date.now() - updated) / 60000)
    if (diff < 60) return `${diff}m ago`
    const hours = Math.floor(diff / 60)
    if (hours < 24) return `${hours}h ago`
    return `${Math.floor(hours / 24)}d ago`
})
</script>
