<script lang="ts">
  /**
   * @type {{ label: string; links: { href: string; label: string; active?: boolean }[] }[]}
   */
  let { groups = [] } = $props();
</script>

<nav aria-label="Seitennavigation" class="w-60 bg-stein-50 p-4">
  {#each groups as group, i}
    <div class="{i > 0 ? 'mt-6' : ''}">
      <p
        class="mb-2 text-xs font-medium uppercase tracking-wider text-stein-500"
      >
        {group.label}
      </p>
      <ul class="space-y-0">
        {#each group.links as link}
          <li>
            <a
              href={link.href}
              class="block rounded-lg px-3 py-2 text-sm {link.active
                ? 'bg-wald-50 font-medium text-wald-500'
                : 'text-stein-700 hover:bg-wald-50'}"
              aria-current={link.active ? 'page' : undefined}
            >
              {link.label}
            </a>
          </li>
        {/each}
      </ul>
    </div>
  {/each}
</nav>
