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

  let { children } = $props<{ children: import('svelte').Snippet }>();

  // Tab bar for the Library section. Mirrors Android's LibraryScreen
  // (artists / albums / liked / history / playlists) — Playlists lives
  // here so the operator can find their personal collection in one
  // place rather than tracking a separate top-level route.
  // Genres and Years sit next to Albums — all three are ways of walking the
  // same collection — rather than at the end beside the personal tabs (Liked,
  // History, Playlists). NOTE: these two are web-only for now; Android's
  // LibraryScreen has no equivalent, so the "mirrors Android" claim above is
  // currently aspirational for this pair. Parity is an open call (#367).
  const tabs = [
    { href: '/library/artists',   label: 'Artists' },
    { href: '/library/albums',    label: 'Albums' },
    { href: '/library/genres',    label: 'Genres' },
    { href: '/library/years',     label: 'Years' },
    { href: '/library/liked',     label: 'Liked' },
    { href: '/library/history',   label: 'History' },
    { href: '/library/playlists', label: 'Playlists' }
  ];

  function isActiveTab(href: string): boolean {
    return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
  }
</script>

<div class="space-y-4">
  <nav aria-label="Library sections" class="border-b border-border">
    <ul class="flex gap-1 overflow-x-auto">
      {#each tabs as tab}
        {@const active = isActiveTab(tab.href)}
        <li>
          <a
            href={tab.href}
            class="block px-3 md:px-4 py-3 text-sm whitespace-nowrap border-b-2
                   {active
                     ? 'border-accent text-text-primary'
                     : 'border-transparent text-text-secondary hover:text-text-primary'}"
            aria-current={active ? 'page' : undefined}
          >
            {tab.label}
          </a>
        </li>
      {/each}
    </ul>
  </nav>

  {@render children?.()}
</div>
