import React, { useContext } from "react";
import Link from "next/link";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import ProductContext from "@/app/contexts/productContext";

const DynamicNavbar = ({ toggleMenu }) => {
  const { category } = useContext(ProductContext);

  if (!category) {
    return null;
  }

  const categoryItems = category?.map((category) => ({
    label: category.category_name,
    url: `/collections/${category.id}`,
  }));

  const consultation = {
    label: "Rudraksha consultation",
    url: "/products/premium-rudraksha-consultation-astrology",
  };

  const visibleItems = [...categoryItems.slice(0, 4), consultation];

  return (
    <NavigationMenu className="text-xl">
      <NavigationMenuList className="text-2xl">
        {visibleItems.map((item) => (
          <NavigationMenuItem key={item.label}>
            <Link href={item.url} legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                {item.label}
              </NavigationMenuLink>
            </Link>
          </NavigationMenuItem>
        ))}

        <NavigationMenuItem>
          <button onClick={toggleMenu} className={navigationMenuTriggerStyle()}>
            More
          </button>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
};

export default DynamicNavbar;