import Link from "next/link";
import { MenuCategory } from "@/lib/types/models";
import MenuItem from "../menu-item";

export default async function Page({
  headerData,
  helpAndIdeasMenuData,
}: {
  headerData: MenuCategory[];
  helpAndIdeasMenuData: { name: string; url: string }[];
}) {
  return (
    <div className="lg:border-y border-b border-gray-3">
      <nav className="main-container relative lg:block hidden">
        <div className="flex items-center lg:gap-x-10">
          {headerData?.map((item, index) => (
            <div className="main-menu" key={index}>
              <Link
                prefetch={false}
                href={`/info/${item?.slug}`}
                className="lg:py-4 inline-flex text-[15px] items-center text-neutral-black-70 font-medium hover:text-primary border-transparent border-b-2 hover:border-primary"
              >
                {item?.name}
              </Link>
              <div className="sub-menu absolute mt-[1px] z-50 left-0 bg-[#FFFFFF] rounded-b-[8px] p-[10px] min-h-[324px] w-full shadow-[0_2px_4px_0px_rgba(0,0,0,0.1)]">
                <MenuItem data={item.data} />
              </div>
            </div>
          ))}
          <div className="z-10 relative main-menu">
            <button
              type="button"
              className="lg:py-4 inline-flex text-[15px] items-center text-neutral-black-70 font-medium hover:text-primary border-transparent border-b-2 hover:border-primary"
            >
              Services
            </button>
            <div className="sub-menu absolute mt-[1px] bg-[#FFFFFF] rounded-b-[8px] top-[calc(100%)] p-[10px] min-h-[50px] min-w-[225px] shadow-[0_2px_4px_0px_rgba(0,0,0,0.1)]">
              <div className="px-[10px]">
                <div className="grid grid-cols-1">
                  <Link
                    href={`/mailing-service`}
                    prefetch={false}
                    className=" hover:text-primary text-neutral-black-70 my-3 text-[13px] leading-[16px] font-normal w-[210px]"
                  >
                    Mailing Services
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="z-10 relative main-menu">
            <Link
              prefetch={false}
              href={`/shop-by-industries`}
              className="lg:py-4 inline-flex text-[15px] items-center text-neutral-black-70 font-medium hover:text-primary border-transparent border-b-2 hover:border-primary"
            >
              Shop by Industry
            </Link>
          </div>
          <div className="z-10 relative main-menu">
            <button
              type="button"
              className="lg:py-4 inline-flex text-[15px] items-center text-neutral-black-70 font-medium hover:text-primary border-transparent border-b-2 hover:border-primary"
            >
              Help & Ideas
            </button>
            <div className="sub-menu absolute mt-[1px] bg-[#FFFFFF] rounded-b-[8px] top-[calc(100%)] p-[10px] min-h-[225px] min-w-[225px] shadow-[0_2px_4px_0px_rgba(0,0,0,0.1)]">
              <div className="px-[10px]">
                <div className="grid grid-cols-1">
                  {helpAndIdeasMenuData.map((item, index) => (
                    <Link
                      href={`/${item.url}`}
                      prefetch={false}
                      key={index}
                      className=" hover:text-primary text-neutral-black-70 my-3 text-[13px] leading-[16px] font-normal w-[210px]"
                    >
                      {item.name}
                    </Link>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );
}
