<script setup lang="ts">
import ScrollArea from "@/Components/ui/scroll-area/ScrollArea.vue";
import BaseLayout from "./BaseLayout.vue";
import MainNavJobLink from "@/Components/Layout/MainNav/MainNavJobLink.vue";
import { Job } from "@/types/Jobs/job";
import MainNavItem from "@/Components/Layout/MainNav/MainNavItem.vue";

let jobs = [
    { id: 1, name: "Hellcase" },
    { id: 2, name: "Jeu gratuit Epic Games" },
    { id: 3, name: "Envoyer un post instagram" },
];
</script>

<template>
    <BaseLayout class="flex justify-stretch items-start gap-3">
        <ScrollArea class="h-full w-50 overflow-auto">
            <nav class="p-3">
                <ul class="flex flex-col gap-2">
                    <MainNavItem link="/"> Accueil </MainNavItem>
                    <MainNavJobLink
                        :job="job as Job"
                        v-for="job in jobs"
                        :key="job.id"
                    />
                </ul>
            </nav>
        </ScrollArea>

        <ScrollArea class="flex-1 h-full overflow-auto">
            <main>
                <slot />
            </main>
        </ScrollArea>
    </BaseLayout>
</template>
