<template>
    <div class="event-list">
        <div class="filter-bar">
            <h3 class="h4">Upcoming Events</h3>

            <div class="filters">
                <btn
                    :class="{ active: filter === 'current' }"
                    @click="onFilterClick('current')"
                    >Current</btn
                >
                <btn
                    :class="{ active: filter === 'past' }"
                    @click="onFilterClick('past')"
                    >Past</btn
                >
            </div>
        </div>

        <event-list-item
            v-for="event in filteredEvents"
            :event="event"
            @hover="(e) => emit('eventHover', e)"
            @blur="(e) => emit('eventBlur', e)"
        />
    </div>
</template>

<script setup>
const props = defineProps({ events: Array })
const emit = defineEmits(['eventHover', 'eventBlur'])

const { filter, filteredEvents } = useFilteredEvents(props.events)

const onFilterClick = (label) => {
    navigateTo({
        query: {
            filter: label,
        },
    })
}
</script>

<style lang="scss">
.event-list {
    margin-top: desktop-vw(78px);

    .filter-bar {
        padding: desktop-vw(20px) var(--layout-margin);
        display: flex;
        justify-content: space-between;

        .filters {
            display: flex;
            gap: desktop-vw(15px);
        }
    }

    @include mobile {
        margin-top: mobile-vw(75px);

        .filter-bar {
            padding: mobile-vw(20px) var(--layout-margin);
            display: block;

            .filters {
                margin-top: mobile-vw(15px);
                gap: mobile-vw(15px);
            }
        }
    }
}
</style>
