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

const navItems = [
  { to: '/dashboard', icon: '🏠', label: 'หน้าหลัก' },
  { to: '/browse/discovery', icon: '🔍', label: 'รายการคอร์ส' },
  { to: '/dashboard/my-courses', icon: '📚', label: 'คอร์สของฉัน' }
]

const isActive = (path: string) => {
  if (path === '/') return route.path === '/'
  return route.path.startsWith(path)
}
</script>

<template>
  <nav class="mobile-nav">
    <NuxtLink
      v-for="item in navItems"
      :key="item.to"
      :to="item.to"
      class="mobile-nav-item"
      :class="{ active: isActive(item.to) }"
    >
      <span>{{ item.icon }}</span>
      <span>{{ item.label }}</span>
    </NuxtLink>
  </nav>
</template>
