<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {User, UserAction} from "@/Types/types";
import { Head } from "@inertiajs/vue3";
import FeedItem from "@/Components/FlightsGoneBy/Feed/FeedItem.vue";

defineOptions({ layout: MainLayout })

const props = defineProps<{
    user: User
    feed: UserAction[]
}>()
</script>

<template>
    <Head title="Feed" />

    <div class="feed-page">
        <header class="feed-header">
            <h1>Feed</h1>
            <span class="feed-count">{{ feed.length }} updates</span>
        </header>

        <div v-if="feed.length === 0" class="empty">
            <p>Nothing here yet — follow someone to see their flight updates!</p>
        </div>

        <div class="feed-list">
            <FeedItem v-for="action in feed" :key="action.id" :action="action" />
        </div>
    </div>
</template>

<style scoped>
.feed-page {
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 55%;
}

@media (max-width: 768px) {
    .feed-page {
        width: 100%;
    }
}

.feed-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feed-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.feed-count {
    font-size: 0.85rem;
    color: #6b7280;
}

.empty p {
    text-align: center;
    margin-top: 3rem;
}

.feed-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
</style>
