"use client"

import Link from "next/link"
import { useMemo } from "react"
import { cn } from "@/lib/utils"

export default function TopNav({ activePath }: { activePath?: string }) {
  const items = useMemo(
    () => [
      { href: "/", label: "首页" },
      { href: "/data-platform", label: "数据中台" },
      { href: "/user-portrait", label: "用户画像" },
      { href: "/ai-assistant", label: "AI 助手" },
      { href: "/user-valuation", label: "用户资产估值" },
    ],
    [],
  )

  return (
    <nav className="flex h-14 items-center gap-2">
      <div className="mr-4 text-lg font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
        卡若数据资产中台
      </div>
      <ul className="flex items-center gap-1">
        {items.map((it) => {
          const active = activePath === it.href || (it.href !== "/" && activePath?.startsWith(it.href))
          return (
            <li key={it.href}>
              <Link
                href={it.href}
                className={cn(
                  "px-3 py-1.5 rounded-md text-sm hover:bg-slate-100",
                  active && "bg-slate-900 text-white hover:bg-slate-900",
                )}
              >
                {it.label}
              </Link>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}