<script lang="ts">
    import type { ExtendedEvent } from "../types/event";
    import { Button } from "../ui/button";
    import { Calendar } from "lucide-svelte";
    import { List } from "lucide-svelte";
    import EventList from "./EventList.svelte";
    import CalendarView from "./Calendar.svelte";

    const { events }: { events: { slug: string; data: { event: ExtendedEvent } }[] } = $props();

    let viewMode = $state<"list" | "calendar">("list");
</script>

<div class="flex flex-col gap-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-white">Events</h1>
    </div>

    <CalendarView {events} />
    <EventList {events} />
</div>
