<script lang="ts">
  import { page } from "$app/stores";
  import "../../styles/procurement.css";

  const tabs = [
    { label: "Product Catalog", href: "/procurement/catalog", exact: false },
  ] as const;

  function isActive(
    tab: { href: string; exact?: boolean },
    pathname: string,
  ): boolean {
    if (tab.exact) return pathname === tab.href;
    return pathname.startsWith(tab.href);
  }
</script>

<svelte:head>
  <title>Procurement — Project Optima</title>
</svelte:head>

<div class="procurement-page">
  <div class="procurement-pane">
    <!-- Pane header + tabs in one row -->
    <div class="procurement-header">
      <div class="procurement-header-left">
        <svg
          class="procurement-header-icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path
            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
          ></path>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12"></line>
        </svg>
        <h2 class="procurement-title">Procurement</h2>
      </div>
      <nav class="tab-bar" role="tablist">
        {#each tabs as tab}
          <a
            href={tab.href}
            class="tab-btn"
            class:active={isActive(tab, $page.url.pathname)}
            role="tab"
            aria-selected={isActive(tab, $page.url.pathname)}
          >
            {tab.label}
          </a>
        {/each}
      </nav>
    </div>

    <!-- Tab content -->
    <div class="procurement-body">
      <slot />
    </div>
  </div>
</div>
