<script lang="ts">
  import type { ComponentType } from 'svelte';

  export type AppNavSectionItem = {
    label: string;
    href?: string;
    icon?: ComponentType;
    active?: boolean;
    onSelect?: () => void;
    type?: 'button' | 'link';
    badge?: string;
  };

  let {
    label = '',
    ariaLabel = 'Navigation section',
    items
  }: {
    label?: string;
    ariaLabel?: string;
    items: AppNavSectionItem[];
  } = $props();
</script>

{#if label}
  <p class="nav-section-label">{label}</p>
{/if}

<nav class="nav-list" aria-label={ariaLabel}>
  {#each items as item}
    {@const Icon = item.icon}
    {#if item.href && item.type !== 'button'}
      <a class:active={item.active} href={item.href}>
        {#if Icon}
          <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
        {/if}
        <span>{item.label}</span>{#if item.badge}<span class="nav-badge">{item.badge}</span>{/if}
      </a>
    {:else}
      <button type="button" class="nav-button" class:active={item.active} onclick={item.onSelect}>
        {#if Icon}
          <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
        {/if}
        <span>{item.label}</span>{#if item.badge}<span class="nav-badge">{item.badge}</span>{/if}
      </button>
    {/if}
  {/each}
</nav>

<style>
  .nav-section-label {
    margin: 0.85rem 0.55rem 0.3rem;
    color: var(--nav-section-label-color, var(--muted));
    font-size: var(--nav-section-label-size, 0.7rem);
    font-weight: 700;
    letter-spacing: var(--nav-section-label-spacing, 0.1em);
    text-transform: uppercase;
  }

  .nav-list {
    display: grid;
    gap: 0.12rem;
  }

  .nav-list a,
  .nav-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    border: none;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--nav-item-color, var(--color-text-secondary));
    font-size: var(--nav-item-size, 0.93rem);
    font-weight: var(--nav-item-weight, 500);
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .nav-list a:hover,
  .nav-button:hover {
    background: var(--nav-item-hover-bg, var(--color-surface-hover));
    color: var(--nav-item-hover-color, var(--color-text-primary));
  }

  .nav-list a.active,
  .nav-button.active {
    background: var(--nav-item-active-bg, var(--color-brand));
    color: var(--nav-item-active-color, var(--color-on-brand));
    font-weight: var(--nav-item-active-weight, 600);
  }

  .nav-list a.active::before,
  .nav-button.active::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 3px;
    border-radius: 999px;
    background: var(--nav-item-active-marker, var(--color-brand));
  }

  .nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: var(--color-warning-tint);
    color: var(--color-warning-text);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
  }

  .nav-list a.active .nav-badge,
  .nav-button.active .nav-badge {
    background: var(--color-warning-tint);
    color: var(--color-warning-text);
  }

  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--nav-icon-color, var(--color-text-muted));
    border-radius: 0.55rem;
    transition: color 140ms ease;
  }

  .nav-list a:hover .nav-icon,
  .nav-button:hover .nav-icon {
    color: var(--nav-icon-hover-color, var(--color-text-secondary));
  }

  .nav-list a.active .nav-icon,
  .nav-button.active .nav-icon {
    color: var(--nav-icon-active-color, var(--color-on-brand));
  }
</style>
