<script setup lang="ts">
import MainLayout from '@/layouts/MainLayout.vue';
import CategorySection from '@/components/CategorySection.vue';

defineOptions({
    layout: MainLayout,
});

interface Story {
    source: string;
    time: string | null;
    headline: string;
    deck?: string | null;
    image?: string | null;
    link: string;
}

interface Category {
    label: string;
    hero: boolean;
    items: Story[];
}

defineProps<{
    categories: Category[];
}>();
</script>

<template>
    <div class="feed">
        <CategorySection
            v-for="(category, index) in categories"
            :key="category.label"
            :category="category"
            :index="index"
        />
    </div>
</template>

<style scoped lang="sass">
.feed
    display: flex
    flex-direction: column
</style>
