'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Database, Users, Bot } from 'lucide-react'
import { cn } from '@/lib/utils'

const NAV_ITEMS = [
  { href: '/', label: '首页', icon: Home },
  { href: '/data-platform', label: '数据中台', icon: Database },
  { href: '/user-portrait', label: '画像', icon: Users },
  { href: '/ai-assistant', label: 'AI智能助手', icon: Bot },
] as const

export default function BottomNav() {
  const pathname = usePathname()

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-40 border-t bg-white/95 backdrop-blur md:hidden">
      <ul className="grid grid-cols-4">
        {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
          const active = pathname === href || pathname.startsWith(`${href}/`)
          return (
            <li key={href}>
              <Link
                href={href}
                aria-current={active ? 'page' : undefined}
                className={cn(
                  'flex flex-col items-center justify-center gap-1 py-2 text-xs',
                  active ? 'text-gray-900' : 'text-gray-500',
                )}
              >
                <Icon className={cn('h-5 w-5', active && 'fill-gray-900')} />
                <span>{label}</span>
              </Link>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}