"use client"

import { useRouter } from "next/navigation";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "./navigation-menu"

import { ChevronDown } from "lucide-react";

export interface DropdownNavProps {
  name: string;
  href: string;
  items: {
    href: string;
    label: string;
  }[]
}

export const DropdownNav: React.FC<DropdownNavProps> = ({
  name,
  href,
  items
}) => {

  const router = useRouter();

  const icons = {
    chevron: <ChevronDown size={16} />
  };

  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger className="bg-transparent font-semibold text-black dark:text-white text-sm">
            <a href={href}>
              {name}
            </a>
          </NavigationMenuTrigger>
          <NavigationMenuContent className="border-none">
            <div className="bg-white dark:bg-black border-none p-2">
              {items.map((item) => (
                <a className="" href={item.href} key={item.label}>
                  <div className="flex flex-row items-center hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-lg w-44">
                    <div className="m-2 text-sm">
                      {item.label}
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu >
  );
};