<script setup lang="ts">
import { useProjectsStore } from '@/stores/projects'
import { Folder } from 'lucide-vue-next'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'

const projects = useProjectsStore()
</script>

<template>
  <SidebarGroup>
    <SidebarGroupLabel>Proyectos ({{ projects.count }})</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem v-for="p in projects.projects" :key="p.id">
        <SidebarMenuButton
          :is-active="projects.selectedId === p.id"
          :tooltip="p.initiative_name || `Proyecto ${p.id}`"
          class="h-auto py-2"
          @click="projects.select(p.id)"
        >
          <Folder class="size-4 shrink-0" />
          <div class="grid flex-1 text-left text-sm leading-tight gap-0.5">
            <span class="truncate font-medium text-[13px]">{{ p.initiative_name || `Proyecto ${p.id}` }}</span>
            <span class="truncate text-[11px] text-muted-foreground">Proyecto {{ p.id }}</span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</template>
