import { MenuDataItem } from "@/lib/types/models";
import ThreeCard from "@/modules/ui/three-card";
import React from "react";

export default async function Page({ data }: { data: MenuDataItem[] }) {
  return (
    <div className="bg-[linear-gradient(180deg,_rgba(250,242,255,1)_5.5%,_rgba(255,255,255,1)_96.99%)]">
      <div className="main-container mobile-container relative">
        {data.map((item, index) => {
          return (
            <div key={index} className="mb-[20px] lg:mb-[36px]">
              {data.length > 1 && (
                <h2
                  className={`text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-neutral-black-87 ${item?.menu?.length > 1 ? "pt-[20px]" : "py-[20px]"
                    } font-semibold`}
                >
                  {item.name}
                </h2>
              )}

              {item?.menu.map((menu, index: number) => (
                <div key={index}>
                  {!menu?.includeInNav ? (
                    <h2 className="text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-neutral-black-87 py-[20px] font-semibold">
                      {menu.title}
                    </h2>
                  ) : null}
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {menu?.menu?.map((data, index: number) => (
                      <ThreeCard
                        key={index}
                        id={data?._id}
                        image={data.image}
                        name={data.name}
                        shortDic={data.shortDescription}
                        price={data.price}
                        quantity={data.quantity}
                        link={`/${item?.slug}/${data.slug}`}
                        promotionalText={data.promotionalText}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}