"use client";

import React from "react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "../ui/navigation-menu";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { NAV_ITEMS } from "@/constants/menu";

const Navbar = () => {
  return (
    <div className=" rounded-sm custom-oswald flex ">
        <NavigationMenu>
          <NavigationMenuList className=" items-center gap-6">
            {NAV_ITEMS.map((link) => {
              return (
                <div>
                  {link.submenu ? (
                    <NavigationMenuItem>
                      <NavigationMenuTrigger className="p-0 h-0 text-xl font-normal flex gap-1">
                        <span>{link.title}</span>
                      </NavigationMenuTrigger>
                      <NavigationMenuContent className="left-auto top-full w-auto absolute mt-3 bg-dark-2">
                        <ul className="grid p-2 bg-white border md:w-[200px] ">
                          {link.submenuItems?.map((subLink) => (
                            <ListItem
                              href={subLink.path}
                              title={subLink.title}
                              className="hover:opacity-75 text-sm"
                            />
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  ) : (
                    <NavigationMenuItem className=" hover:text-color-1">
                      <Link href={link.path} className="flex gap-1 text-xl items-center whitespace-pre">
                        <span>{link.title}</span>
                      </Link>
                    </NavigationMenuItem>
                  )}
                </div>
              );
            })}
          </NavigationMenuList>
        </NavigationMenu>
    </div>
  );
};

const ListItem = React.forwardRef<
  React.ElementRef<"a">,
  React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          ref={ref}
          className={cn(
            "block select-none space-y-1 rounded-md p-2  leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
          {...props}
        >
          <div className="text-xl leading-none">{title}</div>
        </a>
      </NavigationMenuLink>
    </li>
  );
});
ListItem.displayName = "ListItem";

export default Navbar;