"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { BookOpen } from "lucide-react"
import { useAuth } from "@/context/auth-context"

export function MainNav() {
  const pathname = usePathname()
  const { user } = useAuth()

  return (
    <div className="mr-4 flex">
      <Link href="/" className="mr-6 flex items-center space-x-2">
        <BookOpen className="h-6 w-6" />
        <span className="hidden font-bold sm:inline-block">图书管理系统</span>
      </Link>
      <nav className="flex items-center space-x-6 text-sm font-medium">
        <Link
          href="/"
          className={cn(
            "transition-colors hover:text-foreground/80",
            pathname === "/" ? "text-foreground" : "text-foreground/60",
          )}
        >
          首页
        </Link>
        <Link
          href="/books"
          className={cn(
            "transition-colors hover:text-foreground/80",
            pathname?.startsWith("/books") ? "text-foreground" : "text-foreground/60",
          )}
        >
          图书
        </Link>
        <Link
          href="/orders"
          className={cn(
            "transition-colors hover:text-foreground/80",
            pathname?.startsWith("/orders") ? "text-foreground" : "text-foreground/60",
          )}
        >
          订单
        </Link>
        {user?.isAdmin && (
          <Link
            href="/admin"
            className={cn(
              "transition-colors hover:text-foreground/80",
              pathname?.startsWith("/admin") ? "text-foreground" : "text-foreground/60",
            )}
          >
            管理后台
          </Link>
        )}
      </nav>
    </div>
  )
}