<template>
    <div class="space-y-6">
        <h1 class="text-2xl font-black text-zinc-800">Saved Stations</h1>

        <div v-if="loading" class="space-y-2">
            <div v-for="i in 3" :key="i" class="h-16 bg-white rounded-xl animate-pulse border border-zinc-300"></div>
        </div>

        <div v-else-if="savedStations.length === 0" class="p-8 bg-white rounded-2xl border border-zinc-300 text-center text-zinc-500">
            <iconify-icon icon="lucide:bookmark" class="text-3xl mb-2"></iconify-icon>
            <p class="font-medium">No saved stations yet.</p>
            <p class="text-sm mt-1">Search for fuel and bookmark stations to see them here.</p>
        </div>

        <div v-else class="space-y-2">
            <div
                v-for="station in savedStations"
                :key="station.station_id"
                class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300"
            >
                <div>
                    <p class="font-bold text-zinc-800">{{ station.name }}</p>
                    <p class="text-sm text-zinc-500">{{ station.postcode }}</p>
                </div>
                <button
                    @click="remove(station.station_id)"
                    class="text-sm font-bold text-red-400 hover:text-red-600 transition-colors"
                >
                    Remove
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSavedStations } from '../../composables/useSavedStations.js'

const { savedStations, loading, fetch, remove } = useSavedStations()

onMounted(fetch)
</script>
