"use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const navigations = [
  { title: "首页", href: "/" },
  { title: "机构设置", href: "/organization/overview" },
  { title: "人才队伍", href: "/talents/overview" },
  { title: "科研进展", href: "#" },
  { title: "科技成果", href: "#" },
  { title: "学术交流", href: "#" },
  { title: "成果转化服务", href: "#" },
  { title: "中科院科技资源共享平台", href: "#" },
  { title: "联系我们", href: "#" },
];

const isActive = (link: string, current: string): boolean => {
  if (link === current) return true;
  if (link === "/") return false;
  const link_0 = link.split(/\/+/).filter(Boolean)[0];
  const current_0 = current.split(/\/+/).filter(Boolean)[0];
  return link_0 === current_0;
};

const MainNav = () => {
  const pathname = usePathname();
  return (
    <nav className={"main-nav bg-[#1958a7] h-[38px]"}>
      <ul className={"w-full h-full flex"}>
        {navigations.map((navigation, index) => (
          <li key={navigation.title + index}>
            <Link
              href={navigation.href}
              className={`${
                isActive(navigation.href, pathname)
                  ? "text-[#dedede]"
                  : "text-white"
              } hover:text-[#dedede] text-sm h-[38px] flex justify-center items-center min-w-[60px] mx-2.5`}
            >
              {navigation.title}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default MainNav;