fad-trade-next/components/header/HeaderLinks.tsx

"use client";

import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { HeaderLink } from "@/types/common";
import { ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl";

const HeaderLinks = () => {
  const tHeader = useTranslations("Header");
  const pathname = usePathname();
  const router = useRouter();

  const headerLinks: HeaderLink[] = tHeader.raw("links");
  const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;

  return (
    <div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
      {headerLinks.map((link) => {
        const isAbout = link.href === "/about";
        const isNews = link.href === "/blog";
        if (isAbout) {
          return (
            <div key={link.name} className="relative group">
              <I18nLink
                href={link.href}
                title={link.name}
                prefetch={true}
                className={cn(
                  "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
                  pathname === link.href && "font-semibold text-accent-foreground"
                )}
              >
                {link.name}
              </I18nLink>
              {/* 移除触发器与菜单间的间隙，使用 pt-2 保持视觉间距但不中断 hover 区域 */}
              <div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
                <div className="w-56 rounded-md border bg-white shadow-md overflow-hidden">
                  <I18nLink prefetch={false} href="/about/arch#arch-vision" className="block px-4 py-2 hover:bg-red-600 hover:text-white">友发愿景</I18nLink>
                  <I18nLink prefetch={false} href="/about/arch#arch-products" className="block px-4 py-2 hover:bg-red-600 hover:text-white">产品体系</I18nLink>
                  <I18nLink prefetch={false} href="/about/arch#arch-application" className="block px-4 py-2 hover:bg-red-600 hover:text-white">应用场景</I18nLink>
                  <I18nLink prefetch={false} href="/about/arch#arch-contact" className="block px-4 py-2 hover:bg-red-600 hover:text-white">联系方式</I18nLink>
                </div>
              </div>
            </div>
          );
        }
        if (isNews) {
          return (
            <div key={link.name} className="relative group">
              <I18nLink
                href={link.href}
                title={link.name}
                prefetch={true}
                className={cn(
                  "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
                  pathname === link.href && "font-semibold text-accent-foreground"
                )}
              >
                {link.name}
              </I18nLink>
              <div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
                <div className="w-44 rounded-md border bg-white shadow-md overflow-hidden">
                  {[
                    { key: "company", label: "公司新闻" },
                    { key: "experts", label: "专家访谈" },
                    { key: "industry", label: "行业动态" },
                    { key: "notice", label: "公告" },
                  ].map((it) => (
                    <button
                      key={it.key}
                      className="block w-full text-left px-4 py-2 hover:bg-red-600 hover:text-white"
                      onMouseDown={(e) => {
                        const url = `${localePrefix}/blog?type=${it.key}`;
                        try { router.push(url as any); } catch {}
                        // 兜底，确保跳转
                        setTimeout(() => { if (typeof window !== 'undefined') window.location.href = url; }, 0);
                      }}
                      onClick={(e) => {
                        const url = `${localePrefix}/blog?type=${it.key}`;
                        try { router.push(url as any); } catch {}
                      }}
                      onTouchStart={() => {
                        const url = `${localePrefix}/blog?type=${it.key}`;
                        try { router.push(url as any); } catch {}
                      }}
                    >
                      {it.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          );
        }
        return (
          <I18nLink
            key={link.name}
            href={link.href}
            title={link.name}
            prefetch={link.target && link.target === "_blank" ? false : true}
            target={link.target || "_self"}
            rel={link.rel || undefined}
            className={cn(
              "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
              pathname === link.href && "font-semibold text-accent-foreground"
            )}
          >
            {link.name}
            {link.target && link.target === "_blank" && (
              <span className="text-xs">
                <ExternalLink className="w-4 h-4" />
              </span>
            )}
          </I18nLink>
        );
      })}
    </div>
  );
};

export default HeaderLinks;