import { ComingSoonBadge, ProBadge } from "@/components/plan-badges";
import { TABS } from "@/config/tabs";
import { cn } from "@/lib/utils";
import { __ } from "@wordpress/i18n";
import { NavLink } from "react-router";

const linkClass = ({ isActive }) =>
  cn(
    "ino:inline-flex ino:h-11 ino:items-center ino:gap-1.5 ino:border-b-2 ino:text-sm ino:font-medium ino:no-underline ino:transition-colors ino:focus:shadow-none ino:focus-visible:outline-2 ino:focus-visible:outline-ring",
    isActive
      ? "ino:border-foreground ino:text-foreground"
      : "ino:border-transparent ino:text-muted-foreground ino:hover:text-foreground",
  );

/**
 * Row of settings tabs under the header.
 */
const TabNav = () => (
  <nav
    aria-label={__("Compare settings", "product-comparison-for-woocommerce")}
    className="ino:flex ino:flex-wrap ino:gap-x-6"
  >
    {TABS.map((tab) => (
      <NavLink
        key={tab.key}
        to={tab.path}
        end={tab.path === "/"}
        className={linkClass}
      >
        {tab.label}
        {tab.later ? <ComingSoonBadge /> : tab.pro && <ProBadge />}
      </NavLink>
    ))}
  </nav>
);

export default TabNav;