"use client";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@radix-ui/react-navigation-menu";
import { Home, Services, Heart, Document, Call } from "@/icons";
import Image from "next/image";
import CutCornerParentCard from "./global/CutCornerParentCard";
import ButtonCutCorner from "./atoms/ButtonCutCorner";
import { usePathname } from "next/navigation";
const menuItems = [
  { title: "صفحه اصلی", route: "/", icon: Home },
  { title: "خدمات ما", route: "/services", icon: Services },
  { title: "نمونه کارها", route: "/portfolio", icon: Heart },
  { title: "درباره ما", route: "/about", icon: Document },
  { title: "راه های ارتباطی", route: "/contact", icon: Call },
];
export default function NavBar() {
  const pathname = usePathname();
  return (
    <NavigationMenu className="hidden lg:flex justify-between items-start gap-5 px-20 py-6">
      <ButtonCutCorner
        buttonText="مشاوره مستقیم"
        triangle
        btnClassName="min-h-14"
      />
      <CutCornerParentCard
        topLeft
        bottomRight
        borderColor="var(--white-foreground)"
        className="flex flex-row-reverse round-[8px] text-right justify-center items-center px-10"
      >
        <NavigationMenuList className="flex flex-row-reverse items-center gap-10 h-15 mr-5">
          {menuItems.map((item, index) => {
            const isActive = pathname === item.route;
            const IconComponent = item.icon;
            return (
              <NavigationMenuItem key={index}>
                <NavigationMenuLink
                  href={item.route}
                  className="flex gap-2 text-primary font-bold cursor-pointer"
                >
                  {item.title}
                  <IconComponent
                    className={isActive ? "text-secondary" : "text-primary"}
                  />
                </NavigationMenuLink>
              </NavigationMenuItem>
            );
          })}
        </NavigationMenuList>
      </CutCornerParentCard>
      <Image
        src="/logo-noiatech.svg"
        alt="Logo"
        width={218}
        height={86}
        className="cursor-pointer"
      />
    </NavigationMenu>
  );
}
