<script setup lang="ts">
import { Link } from "@inertiajs/vue3";
import { cn } from "../lib/utils";

defineProps<{
  items: Array<{ key: string; label: string; route?: string | null }>;
  activeKey: string | null;
}>();
</script>

<template>
  <!-- Mobile: horizontal scrollable tab nav -->
  <div class="mb-6 flex gap-1 overflow-x-auto border-b pb-1 md:hidden">
    <Link
      v-for="item in items"
      :key="item.key"
      :href="item.route ?? '#'"
      :class="
        cn(
          'shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-sm transition-colors',
          activeKey === item.key
            ? 'bg-accent text-accent-foreground font-medium'
            : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
        )
      "
    >
      {{ item.label }}
    </Link>
  </div>

  <!-- Desktop: two-column layout with vertical nav -->
  <div class="md:flex md:gap-8">
    <nav class="hidden w-48 shrink-0 md:block">
      <ul class="space-y-0.5">
        <li v-for="item in items" :key="item.key">
          <Link
            :href="item.route ?? '#'"
            :class="
              cn(
                'flex items-center rounded-md px-3 py-2 text-sm transition-colors',
                activeKey === item.key
                  ? 'bg-accent text-accent-foreground font-medium'
                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
              )
            "
          >
            {{ item.label }}
          </Link>
        </li>
      </ul>
    </nav>

    <div class="min-w-0 flex-1">
      <slot />
    </div>
  </div>
</template>
