import { DirectionAwareHover } from "@/components/aceternity/direction-aware-hover";
import { cn } from "@/lib/utils";

interface FeatureData {
  id: string;
  imgClass: string;
  imgsrc: string;
  ptitle: string;
  price: number;
}

interface Gallery31Props {
  featureData?: FeatureData[];
  className?: string;
}

const formatPrice = (value: number) =>
  new Intl.NumberFormat("fa-IR", {
    style: "currency",
    currency: "IRR",
    maximumFractionDigits: 0,
  }).format(value);

const defaultFeatureData: FeatureData[] = [
  {
    id: "product-1",
    imgClass: "md:h-70 w-full rounded-3xl md:w-full",
    imgsrc: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    ptitle: "دسته بازی",
    price: 199,
  },
  {
    id: "product-2",
    imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
    imgsrc: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    ptitle: "هدفون بی‌سیم",
    price: 189,
  },
  {
    id: "product-3",
    imgClass:
      "md:h-70 col-span-1 h-full w-full rounded-3xl md:w-full lg:row-span-2 lg:h-full",
    imgsrc: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    ptitle: "ساعت هوشمند",
    price: 249,
  },
  {
    id: "product-4",
    imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
    imgsrc: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
    ptitle: "اسپیکر بلوتوث",
    price: 179,
  },
  {
    id: "product-5",
    imgClass: "md:h-70 w-full rounded-3xl md:w-full",
    imgsrc: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    ptitle: "کیبورد مکانیکی",
    price: 219,
  },
];

const Gallery31 = ({
  featureData = defaultFeatureData,
  className,
}: Gallery31Props) => {
  return (
    <section lang="fa" className={cn("relative h-full overflow-hidden py-32", className)}>
      <div className="relative container flex h-full w-full flex-col items-center justify-center">
        <div className="relative z-10 flex flex-col items-center justify-center gap-5">
          <p className="rounded-full bg-muted px-2 py-1 text-xs">کاتالوگ</p>
          <h2 className="font-calSans text-center text-2xll font-medium md:text-2xll">
            بلاک‌های اختصاصی ری یو آی
          </h2>
          <p className="text-center text-muted-foreground">
            مجموعه‌ای منتخب از محصولات با طراحی مدرن و کیفیت ساخت بالا.
          </p>
        </div>
        <div className="relative mt-[34px] grid w-full grid-cols-1 justify-center gap-[10px] md:grid-cols-2 lg:grid-cols-4">
          {featureData.map((item) => (
            <DirectionAwareHover
              key={item.id}
              className={item.imgClass}
              imageUrl={item.imgsrc}
              childrenClassName="text-end"
            >
              <p className="text-xl font-bold">{item.ptitle}</p>
              <p className="text-sm font-normal">{formatPrice(item.price)}</p>
            </DirectionAwareHover>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Gallery31 };