import businessCardMenu from "@/assets/images/business-card-menu.png";
import Image from "next/image";
import { FC } from "react";

type CategoryGroup = {
  title: string;
  items: string[];
};

const columns: CategoryGroup[][] = [
  [
    {
      title: "کارت‌های استاندارد",
      items: ["مات", "براق", "بدون روکش"],
    },
    {
      title: "شکل‌های خاص",
      items: ["گوشه گرد", "مربع", "دایره", "بیضی"],
    },
  ],
  [
    {
      title: "کارت‌های پریمیوم",
      items: ["بافت طبیعی", "مخملی", "پنبه‌ای", "کتانی (Linen)", "کرافت"],
    },
    {
      title: "کارت‌های لوکس",
      items: ["پریمیوم پلاس", "لبه رنگی", "فوق‌ضخیم", "پلاستیکی"],
    },
  ],
  [
    {
      title: "روکش های ویژه",
      items: ["فویل تزئینی", "برجسته براق", "فویل برجسته"],
    },
    {
      title: "کارت‌های ویزیت دیجیتال",
      items: ["کارت ویزیت دارای کد QR"],
    },
  ],
];

const AllProductsMenu: FC = () => {
  return (
    <div className="absolute top-full z-50 mt-2 inset-x-4 sm:inset-x-8 lg:inset-x-auto lg:right-[120px] w-auto lg:w-[min(1099px,calc(100vw-240px))] max-h-[70vh] overflow-y-auto rounded-2xl sm:rounded-[32px] bg-[#F9FAFB]/95 backdrop-blur-sm px-4 sm:px-8 pt-6 sm:pt-8 pb-6 sm:pb-10 shadow-lg border border-[#E9EEF2]/80">
      <div className="flex w-full flex-col lg:flex-row items-start justify-between gap-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-0 lg:contents w-full lg:w-auto">
          {columns.map((groups) => (
            <div key={groups[0].title} className="flex w-full lg:w-[228px] shrink-0 flex-col gap-6">
              {groups.map((group) => (
                <div key={group.title} className="flex flex-col gap-2">
                  <div className="flex h-10 items-center px-2 sm:px-4 text-sm sm:text-base font-bold text-black">{group.title}</div>
                  {group.items.map((item) => (
                    <button
                      key={item}
                      type="button"
                      className="flex h-6 w-full items-center px-2 sm:px-4 text-right text-sm sm:text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
                    >
                      {item}
                    </button>
                  ))}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div className="relative mx-auto lg:mx-0 h-[140px] w-[145px] sm:h-[157px] sm:w-[163px] shrink-0 overflow-hidden rounded-2xl">
          <Image src={businessCardMenu} alt="کارت ویزیت" fill className="object-cover" sizes="163px" />
        </div>
      </div>
    </div>
  );
};

export default AllProductsMenu;