<script lang="ts">
  import { page } from '$app/state';

  type Item = { href: string; label: string };

  const items: Item[] = [
    { href: '/admin',                 label: 'Overview'        },
    { href: '/admin/integrations',    label: 'Integrations'    },
    { href: '/admin/requests',        label: 'Requests'        },
    { href: '/admin/quarantine',      label: 'Quarantine'      },
    { href: '/admin/playback-errors', label: 'Playback errors' },
    { href: '/admin/diagnostics',     label: 'Diagnostics'     },
    { href: '/admin/tuning',          label: 'Tuning'          },
    { href: '/admin/users',           label: 'Users'           }
  ];

  function isActive(href: string): boolean {
    if (href === '/admin') return page.url.pathname === '/admin';
    return page.url.pathname.startsWith(href);
  }
</script>

<nav aria-label="Admin sections" class="sticky top-0 z-10 border-b border-border bg-background">
  <ul class="flex gap-2">
    {#each items as item (item.href)}
      <li>
        <a
          href={item.href}
          aria-current={isActive(item.href) ? 'page' : undefined}
          class="block border-b-2 px-3 py-2 text-sm transition-colors {isActive(item.href)
            ? 'border-accent text-text-primary'
            : 'border-transparent text-text-secondary hover:text-text-primary'}"
        >
          {item.label}
        </a>
      </li>
    {/each}
  </ul>
</nav>
