"use client";

import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { HeaderLink } from "@/types/common";
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) => {

        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>
            {
              link?.children && (
                <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">
                    {link.children.map((child) => (
                      <I18nLink key={child.name} prefetch={false} href={child.href} className="block px-4 py-2 hover:bg-red-600 hover:text-white">
                        {child.name}
                      </I18nLink>
                    ))}
                  </div>
                </div>
              )
            }
          </div>
        );
      })}
    </div>
  );
};

export default HeaderLinks;