<!--
  Browse / All / Genres for a video library.

  These were three routes per library with names that did not agree across the
  two libraries; they are now tabs on one route, driven by `?view=` so a tab is
  linkable and survives a back navigation.

  TRACES: UR-063 | DR-105
-->
<script lang="ts">
  import { goto } from "$app/navigation";
  import { LIBRARY_VIEWS, libraryViewUrl, type LibraryView } from "$lib/utils/libraryView";

  interface Props {
    /** Route the tabs live on, e.g. `/library/tv`. */
    basePath: string;
    active: LibraryView;
    /** Per-view labels — "All Shows" vs "All Movies". */
    labels: Record<LibraryView, string>;
  }

  let { basePath, active, labels }: Props = $props();

  function select(view: LibraryView) {
    if (view === active) return;
    // replaceState: switching tabs is not a navigation step worth a back press.
    goto(libraryViewUrl(basePath, view), { replaceState: true, noScroll: true });
  }
</script>

<nav class="flex items-center gap-1 px-4" aria-label="Library sections">
  {#each LIBRARY_VIEWS as view (view)}
    <button
      onclick={() => select(view)}
      aria-current={view === active ? "page" : undefined}
      class="px-4 py-2 rounded-lg text-sm font-medium transition-colors
             {view === active
               ? 'bg-[var(--color-jellyfin)] text-white'
               : 'text-gray-400 hover:text-white hover:bg-white/10'}"
    >
      {labels[view]}
    </button>
  {/each}
</nav>
