<template>
  <nav class="fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-[0_-2px_10px_rgba(0,0,0,0.05)] flex justify-around py-2 border-t border-gray-200/80">
    <router-link 
      v-for="item in navItems" 
      :key="item.name"
      :to="item.href"
      class="flex flex-col items-center justify-center text-xs p-2 rounded-md transition-colors w-20"
      :class="isActive(item.href) ? 'text-tech-blue bg-tech-blue/10 font-semibold' : 'text-text-medium hover:bg-gray-100 hover:text-tech-blue'"
    >
      <i :data-lucide="item.icon" class="w-5 h-5 mb-1"></i>
      <span>{{ item.text }}</span>
    </router-link>
  </nav>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { icon: 'message-square', text: '聊天', href: '/chat', name: 'Chat' },
  { icon: 'book-open', text: '日记', href: '/diary', name: 'Diary' },
  { icon: 'crosshair', text: '话题', href: '/topic-tracker', name: 'TopicTracker' },
  { icon: 'milestone', text: '人生轨迹', href: '/life-milestones', name: 'LifeMilestones' },
  { icon: 'layout-dashboard', text: '个人展板', href: '/personal-dashboard', name: 'PersonalDashboard' }
]

const isActive = (href: string) => {
  return route.path === href
}

onMounted(() => {
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
})
</script>

<style scoped>
:root {
  --tech-blue: #4A90E2;
  --text-medium: #888888;
}

.text-tech-blue { color: var(--tech-blue); }
.text-text-medium { color: var(--text-medium); }
.bg-tech-blue\/10 { background-color: rgba(74, 144, 226, 0.1); }
</style>
