import React from "react";
import CustomLink from "../global/CustomLink";
import ChevronLeftSvg from "../icons/ChevronLeftSvg";

const hovered_menu =
  "after:inline-block after:w-full after:h-1 after:bg-white after:absolute after:bottom-0 after:left-0 after:rounded-t-xl";

interface MenuProps {
  direction?: "horizontal" | "vertical";
  items: MenuItemsTypes[];
}
export default function Menu({direction = "horizontal", items}: MenuProps) {
  return (
    <nav className="flex items-center">
      <ul
        className={` text-primary  flex text-xs lg:text-base  relative items-center text-white ${
          direction === "horizontal" ? "flex-row gap-x-6" : "flex-col gap-y-4"
        }`}
      >
        {items.map((link) => (
          <li
            key={link.id}
            className="group py-[40px] text-menu-colors relative h-full after:hidden  hover:after:inline-block after:w-full after:h-1 after:bg-blue-primary after:absolute after:bottom-0 after:left-0 after:rounded-t-xl"
          >
            <span className="flex items-center gap-x-2">
              <CustomLink href={link.href} label={link.label} className="text-sm font-medium text-[#e6e6e6] hover:text-white transition-all" />

              {link.sub.length > 0 ? (
                <span className="-rotate-90 group-hover:rotate-90 transition-all duration-300">
                  <ChevronLeftSvg size="10" />
                </span>
              ) : (
                ""
              )}
            </span>
            {link.sub.length > 0 && (
              <ul className="hidden group-hover:block absolute top-full z-20 bg-blue-primary w-64 shadow-inner space-y-5 p-3 rounded-b-xl">
                {link.sub.map((submenu) => (
                  <li key={submenu.id} className="w-full text-blue-primary hover:font-medium  p-1 px-3">
                    <CustomLink href={submenu.href} label={submenu.label} className="text-sm font-medium text-[#e6e6e6] hover:text-white transition-all"  />
                  </li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}
