<template>
  <nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <router-link to="/" class="text-xl font-bold text-indigo-600 hover:text-indigo-700">
            📚 图书管理系统
          </router-link>
        </div>
        <div class="flex items-center space-x-4">
          <router-link 
            v-if="isLoggedIn"
            to="/" 
            class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50 transition-colors"
          >
            书库
          </router-link>
          <router-link 
            v-if="isLoggedIn"
            to="/history" 
            class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50 transition-colors"
          >
            阅读记录
          </router-link>
          <button 
            v-if="isLoggedIn"
            @click="handleLogout"
            class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-red-600 hover:bg-gray-50 transition-colors"
          >
            退出登录
          </button>
          <router-link 
            v-else
            to="/login" 
            class="px-4 py-2 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"
          >
            登录
          </router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isLoggedIn = computed(() => !!localStorage.getItem('token'))

const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}
</script>
