"use client"

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

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

  const tabs = [
    { href: "/", label: "首页", icon: Home },
    { href: "/data-platform", label: "数据中台", icon: Database },
    { href: "/user-portrait", label: "用户池", icon: Users }, // 改名为用户池
    { href: "/user-assets", label: "用户资产", icon: TrendingUp },
    { href: "/ai-assistant", label: "AI助手", icon: Bot },
  ]

  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t bg-white/90 backdrop-blur">
      <ul className="mx-auto grid max-w-full grid-cols-5">
        {tabs.map((t) => {
          const active = pathname === t.href || (t.href !== "/" && pathname.startsWith(t.href))
          const Icon = t.icon
          return (
            <li key={t.href}>
              <Link
                href={t.href}
                className={cn(
                  "flex flex-col items-center justify-center py-2 text-xs",
                  active ? "text-slate-900" : "text-slate-600",
                )}
              >
                <Icon className="h-4 w-4" />
                <span className="mt-0.5 text-[10px]">{t.label}</span>
              </Link>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}
