<template>
  <div class="mb-12">
    <div class="w-full mx-auto">
      <nav
        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
      >
        <NuxtLink
          v-for="item in coopBuilderItems"
          :key="item.id"
          :to="item.path"
          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
          :class="
            isActive(item.path)
              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
              : ''
          "
        >
          {{ item.name }}
        </NuxtLink>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();

const coopBuilderItems = [
  {
    id: "dashboard",
    name: "Dashboard",
    path: "/dashboard",
  },
  {
    id: "coop-builder",
    name: "Setup Wizard",
    path: "/coop-builder",
  },
  {
    id: "budget",
    name: "Budget",
    path: "/budget",
  },
  {
    id: "mix",
    name: "Revenue Mix",
    path: "/mix",
  },
  {
    id: "runway-lite",
    name: "Runway Lite",
    path: "/runway-lite",
  },
];

function isActive(path: string): boolean {
  return route.path === path;
}
</script>

<style scoped>
/* Ensure horizontal scroll on mobile */
nav {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

nav::-webkit-scrollbar {
  display: none; /* WebKit */
}
</style>