"use client";
import LocalePath from "../LocalePath";
import { useLocale, useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { cleanPath } from "@/utils/helpers";
import { CategoriesProps } from "@/interfaces/types";

const HeaderNavItems = ({ categories }: { categories: CategoriesProps[] }) => {
  const t = useTranslations("");
  const locale = useLocale();
  const pathname = usePathname();

  const activeLink = cleanPath({ path: pathname });

  return (
    <div className="flex items-center gap-10 px-2">
      <LocalePath
        href="/"
        className={`relative transition-colors duration-200 group whitespace-nowrap px-2 py-2 ${activeLink === cleanPath({ path: `${locale == "ar" ? "" : "/en"}/` }) ? "text-primary" : "text-text-primary hover:text-primary "}`}
      >
        <span className="relative z-10 text-[15px] font-normal">
          {t("NAV.home")}
        </span>
        <span
          className={`${activeLink === cleanPath({ path: `${locale == "ar" ? "" : "/en"}/` }) ? "w-full" : "w-0"} absolute bottom-0 left-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300 rounded-full`}
        ></span>
      </LocalePath>
      {categories?.map((ele, index) => (
        <LocalePath
          key={index}
          href={`/products?category_id=${ele.id}`}
          className={`relative transition-colors duration-200 group whitespace-nowrap px-2 py-2 ${
            cleanPath({
              path: window.location.href.split(window.location.origin)[1],
              keepSearchParams: true,
            }) ==
            cleanPath({
              path: `${locale == "ar" ? "" : "/en"}/products?category_id=${ele.id}`,
              keepSearchParams: true,
            })
              ? "text-primary"
              : "text-text-primary hover:text-primary "
          }`}
        >
          <span className="relative z-10 text-[15px] font-normal">
            {ele.name}
          </span>
          <span
            className={`${
              cleanPath({
                path: window.location.href.split(window.location.origin)[1],
                keepSearchParams: true,
              }) ==
              cleanPath({
                path: `${locale == "ar" ? "" : "/en"}/products?category_id=${ele.id}`,
                keepSearchParams: true,
              })
                ? "w-full"
                : "w-0"
            } absolute bottom-0 left-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300 rounded-full`}
          ></span>
        </LocalePath>
      ))}

      <LocalePath
        href="/subscriptions"
        className={`relative transition-colors duration-200 group whitespace-nowrap px-2 py-2 ${activeLink === cleanPath({ path: `${locale == "ar" ? "" : "/en"}/subscriptions` }) ? "text-primary" : "text-text-primary hover:text-primary "}`}
      >
        <span className="relative z-10 text-[15px] font-normal">
          {t("NAV.weekly_subscriptions")}
        </span>
        <span
          className={`${activeLink === cleanPath({ path: `${locale == "ar" ? "" : "/en"}/subscriptions` }) ? "w-full" : "w-0"} absolute bottom-0 left-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300 rounded-full`}
        ></span>
      </LocalePath>
    </div>
  );
};

export default HeaderNavItems;