<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";
import { httpApi } from "@/lib/utils";
import { onMounted, ref } from "vue";

const jobs = ref<Job[]>([]);

async function fetchJobs() {
    let jobsRaw = await httpApi<Job[]>("/jobs");
    jobs.value = jobsRaw.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
}

onMounted(fetchJobs);
</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
                        v-for="job in jobs"
                        :key="job.id"
                        :job="job"
                    />
                </ul>
            </nav>
        </ScrollArea>

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