<template>
    <div class="space-y-3">
        <!-- Sort tabs -->
        <div class="flex gap-2">
            <button
                v-for="option in sortOptions"
                :key="option.value"
                @click="emit('sort', option.value)"
                :class="[
                    'px-4 py-1.5 rounded-full text-sm font-bold transition-colors',
                    currentSort === option.value
                        ? 'bg-accent text-white'
                        : 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
                ]"
            >
                {{ option.label }}
            </button>
        </div>

        <!-- Count -->
        <p class="text-sm text-zinc-500 font-medium">
            {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
        </p>

        <!-- Results -->
        <div class="space-y-2">
            <StationCard
                v-for="station in stations"
                :key="station.station_id"
                :station="station"
                :lowest-price="lowestPrice"
            />
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import StationCard from './StationCard.vue'

const props = defineProps({
    stations: { type: Array, required: true },
    currentSort: { type: String, default: 'price' },
})

const emit = defineEmits(['sort'])

const sortOptions = [
    { label: 'Price', value: 'price' },
    { label: 'Distance', value: 'distance' },
    { label: 'Updated', value: 'updated' },
    { label: 'Brand', value: 'brand' },
    { label: 'Reliable', value: 'reliable' },
]

const lowestPrice = computed(() => {
    if (!props.stations.length) return null
    return Math.min(...props.stations.map(s => s.price_pence))
})
</script>
