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

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

  // Discover and Requests are paired: discover an artist → request it. The
  // tab strip lifts both surfaces onto the same horizontal axis so the
  // operator can move between them without round-tripping through the
  // main nav.
  const items: Item[] = [
    { href: '/discover', label: 'Discover' },
    { href: '/requests', label: 'Requests' }
  ];

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

<nav aria-label="Discover sections" class="border-b border-border">
  <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>
