reui-blocks/blocks/gallery33.tsx

"use client";

import { ArrowRightIcon, HeartIcon } from "lucide-react";
import React, { useState } from "react";

import { Lens } from "@/components/aceternity/lens";
import { cn } from "@/lib/utils";

interface CardData {
  title: string;
  price: number;
  image: string;
  link: string;
}

interface Gallery33Props {
  cardData?: CardData[];
  className?: string;
}

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

const defaultCardData: CardData[] = [
  {
    title: "مجموعه تیر",
    price: 150,
    image: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    link: "#",
  },
  {
    title: "ضروریات تابستانی",
    price: 89,
    image: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    link: "#",
  },
  {
    title: "بسته پریمیوم",
    price: 299,
    image: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    link: "#",
  },
  {
    title: "تازه‌ها",
    price: 120,
    image: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    link: "#",
  },
  {
    title: "نسخه محدود",
    price: 199,
    image: "/block-media/shadcnblocks/block/guri3/img27.jpeg",
    link: "#",
  },
  {
    title: "ست اختصاصی",
    price: 249,
    image: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    link: "#",
  },
];

const Gallery33 = ({
  cardData = defaultCardData,
  className,
}: Gallery33Props) => {
  const [hoveredCard, setHoveredCard] = useState<number | null>(null);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <div className="container w-full">
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {cardData.map((card, index) => (
            <div
              key={index}
              className="relative flex flex-col rounded-4xl bg-muted/60 p-2"
            >
              <Lens
                hovering={hoveredCard === index}
                setHovering={(hovering) =>
                  setHoveredCard(hovering ? index : null)
                }
              >
                <img
                  onMouseEnter={() => setHoveredCard(index)}
                  onMouseLeave={() => setHoveredCard(null)}
                  src={card.image}
                  alt={card.title}
                  className="h-72 w-full rounded-3xl object-cover"
                />
              </Lens>
              <div className="mt-3 flex items-center justify-between gap-3 px-2 pb-3">
                <div className="text-right">
                  <p className="text-sm tracking-tighter text-muted-foreground">
                    {card.title}
                  </p>
                  <h3 className="text-xl font-semibold tracking-tight">
                    {formatPrice(card.price)}
                  </h3>
                </div>
                <a
                  href={card.link}
                  aria-label={`مشاهده ${card.title}`}
                  className="flex size-12 shrink-0 items-center justify-center gap-2 rounded-full bg-muted-foreground/10 text-sm transition-all duration-300 hover:bg-muted-foreground/20"
                >
                  <ArrowRightIcon className="size-7 -rotate-45 stroke-1 rtl:rotate-135" />
                </a>
              </div>
              <div className="absolute top-4 inset-e-4 z-20">
                <button
                  type="button"
                  aria-label={`افزودن ${card.title} به علاقه‌مندی‌ها`}
                  className="flex size-12 items-center justify-center gap-2 rounded-full bg-background/30 text-sm text-background transition-all duration-300 hover:bg-background/50"
                >
                  <HeartIcon className="size-6" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Gallery33 };