@props(['station'])

@php
    $colourClass = match($station['price_classification'] ?? '') {
        'current'  => 'text-status-good',
        'recent'   => 'text-slate-500',
        'stale'    => 'text-status-warn',
        'outdated' => 'text-status-bad',
        default    => 'text-zinc-400',
    };
    $miles = number_format(($station['distance_km'] ?? 0) * 0.621371, 1);
    $price = number_format($station['price'] ?? 0, 1);
@endphp

<div class="flex items-center justify-between rounded-xl border border-border bg-surface px-4 py-3.5">
    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2">
            <p class="truncate text-sm font-bold text-text-base">
                {{ $station['name'] ?? '' }}
            </p>
            @if (! empty($station['is_supermarket']))
                <flux:badge size="sm" color="lime">Supermarket</flux:badge>
            @endif
        </div>
        <p class="truncate text-xs text-text-muted">
            {{ $station['address'] ?? '' }}, {{ $station['postcode'] ?? '' }}
        </p>
        <p class="text-xs text-text-dim">{{ $miles }} miles away</p>
    </div>

    <div class="ml-4 shrink-0 text-right">
        <p class="text-xl font-black text-text-base">{{ $price }}p</p>
        <p class="text-[11px] {{ $colourClass }}">
            {{ $station['price_classification_label'] ?? '' }}
            @if (! empty($station['price_updated_at']))
                &middot; {{ \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() }}
            @endif
        </p>
    </div>
</div>