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 right-[120px] z-50 mt-2 w-[1099px] rounded-[32px] bg-[#F9FAFB]/90 px-8 pt-8 pb-10">
      <div className="flex w-full items-start justify-between">
        {columns.map((groups) => (
          <div key={groups[0].title} className="flex 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-4 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-4 text-right text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
                  >
                    {item}
                  </button>
                ))}
              </div>
            ))}
          </div>
        ))}

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

export default AllProductsMenu;
