<script setup lang="ts">
/**
 * Mobile bottom tab navigation.
 *
 * Displayed on small screens only (below md:). Contains the main
 * navigation links as a fixed bottom tab bar. Hidden on desktop
 * where NavSidebar is used instead.
 */
import { RouterLink, useRoute } from 'vue-router'

const route = useRoute()

interface NavTab {
  path: string
  name: string
  label: string
  icon: string
}

const tabs: NavTab[] = [
  { path: '/', name: 'Dashboard', label: 'Home', icon: '🏠' },
  { path: '/play', name: 'PlayMenu', label: 'Play', icon: '⚔️' },
  { path: '/decks', name: 'DeckList', label: 'Decks', icon: '🃏' },
  { path: '/collection', name: 'Collection', label: 'Cards', icon: '📚' },
  { path: '/profile', name: 'Profile', label: 'Profile', icon: '👤' },
]

function isActive(tab: NavTab): boolean {
  if (tab.path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(tab.path)
}
</script>

<template>
  <nav class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-surface-dark border-t border-gray-700 safe-area-inset-bottom">
    <div class="flex justify-around">
      <RouterLink
        v-for="tab in tabs"
        :key="tab.name"
        :to="tab.path"
        class="flex flex-col items-center py-2 px-3 min-w-[64px] transition-colors"
        :class="[
          isActive(tab)
            ? 'text-primary-light'
            : 'text-gray-400 hover:text-gray-200'
        ]"
      >
        <span class="text-xl">{{ tab.icon }}</span>
        <span class="text-xs mt-1">{{ tab.label }}</span>
      </RouterLink>
    </div>
  </nav>
</template>

<style scoped>
/* Safe area for iOS devices with home indicator */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
</style>
