<script lang="ts">
  import type { NavSection } from '$lib/types/layout';
  import SidebarItem from './SidebarItem.svelte';

  export let section: NavSection;
  export let expanded = true;
</script>

<section class="px-2 py-1" data-testid="sidebar-section">
  {#if expanded}
    <h3 class="text-xs font-semibold uppercase tracking-wide text-base-content/60 px-2 py-2">
      {section.title}
    </h3>
  {/if}

  <div class="space-y-1">
    {#each section.items as item (item.href)}
      <SidebarItem icon={item.icon} label={item.label} href={item.href} {expanded} />
    {/each}
  </div>
</section>
