<script setup lang="ts">
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { httpApi } from '@/lib/utils';
import { type NavItem } from '@/types';
import { Link, usePage } from '@inertiajs/vue3';
import { ref, onMounted } from 'vue';
import { Resume } from '@/types/resume';

const items = ref<NavItem[]>([]);
const page = usePage();

onMounted(async () => {
  try {
    const { data: resumes, error } = await httpApi<Resume[]>(route("resumes.index"));
    if (error || !resumes) {
      console.error('Failed to fetch resumes:', error);
      return;
    }
    items.value = resumes.map((resume: Resume) => ({
      title: resume.name,
      href: route("resumes.edit", resume),
    }));
  } catch (error) {
    console.error('Failed to fetch resumes:', error);
  }
});
</script>

<template>
    <SidebarGroup class="px-2 py-0">
        <SidebarGroupLabel>Mes CV</SidebarGroupLabel>
        <SidebarMenu>
            <SidebarMenuItem v-for="item in items" :key="item.title">
                <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
                    <Link :href="item.href">
                        <span>{{ item.title }}</span>
                    </Link>
                </SidebarMenuButton>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarGroup>
</template>
