"use client";

import { useLocale, useTranslations } from "next-intl";
import Link from "next/link";
import { usePathname } from "next/navigation";

export function InnerNavbar() {
  const t = useTranslations();
  const locale = useLocale();
  const pathname = usePathname();

  const tabs = [
    { name: t("about.subPages.baza"), value: "baza" },
    { name: t("about.subPages.certificate"), value: "certificate" },
    { name: t("about.subPages.notePP"), value: "notePP" },
    { name: t("about.subPages.noteTrailer"), value: "noteTrailer" },
    { name: t("about.subPages.noteFlans"), value: "noteFlans" },
  ];

  return (
    <nav className="w-full border-b border-gray-100 bg-[#1e1d1c] sticky top-0 z-30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center gap-1 overflow-x-auto scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none]">
          {tabs.map((tab) => {
            const href = `/${locale}/about/${tab.value}`;
            const isActive = pathname === href || pathname.endsWith(`/about/${tab.value}`);

            return (
              <Link
                key={tab.value}
                href={href}
                className={[
                  "relative shrink-0 px-4 py-4 text-sm font-semibold transition-colors duration-200 whitespace-nowrap",
                  "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:rounded-full after:transition-all after:duration-200",
                  isActive
                    ? "text-red-600 "
                    : "text-gray-300 after:bg-transparent hover:text-red-600",
                ].join(" ")}
              >
                {tab.name}
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}

export default InnerNavbar;