<script lang="ts">
    import type { ExtendedEvent } from "@components/types/event";
    import { Tabs, TabsList, TabsTrigger, TabsContent } from "@components/ui/tabs";
    import GroupPhaseGenerator from "./gens/group/GroupPhaseGenerator.svelte";
    import SingleEliminationGenerator from "./gens/elimination/SingleEliminationGenerator.svelte";
    import DoubleEliminationGenerator from "./gens/elimination/DoubleEliminationGenerator.svelte";
    let {
        data,
    }: {
        data: ExtendedEvent;
    } = $props();
</script>

<div class="m-4">
    <Tabs value="group">
        <TabsList class="mb-4">
            <TabsTrigger value="group">Gruppenphase</TabsTrigger>
            <TabsTrigger value="ko">K.O. Phase</TabsTrigger>
            <TabsTrigger value="double">Double Elimination</TabsTrigger>
        </TabsList>
        <TabsContent value="group">
            <GroupPhaseGenerator {data} />
        </TabsContent>
        <TabsContent value="ko">
            <SingleEliminationGenerator {data} />
        </TabsContent>
        <TabsContent value="double">
            <DoubleEliminationGenerator {data} />
        </TabsContent>
    </Tabs>
</div>
