<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <div class="max-w-6xl mx-auto w-full px-3 sm:px-4 md:px-6 py-6">
    <nav
      class="flex flex-wrap gap-4 mb-6 border-b border-surface-200 dark:border-surface-700 pb-4"
      aria-label="Superadmin sections"
    >
      <RouterLink
        v-slot="{ isActive, href, navigate }"
        to="/superadmin/modules"
        custom
      >
        <a
          :href="href"
          class="text-surface-700 dark:text-surface-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium"
          :class="{ 'text-primary-600 dark:text-primary-400 border-b-2 border-primary-500 pb-1 -mb-[1px]': isActive }"
          @click="navigate"
        >
          Modules
        </a>
      </RouterLink>
      <RouterLink
        v-slot="{ isActive, href, navigate }"
        to="/superadmin/navigation"
        custom
      >
        <a
          :href="href"
          class="text-surface-700 dark:text-surface-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium"
          :class="{ 'text-primary-600 dark:text-primary-400 border-b-2 border-primary-500 pb-1 -mb-[1px]': isActive }"
          @click="navigate"
        >
          Navigation
        </a>
      </RouterLink>
    </nav>
    <RouterView />
  </div>
</template>
