mehraein-front/app/product/components/ProductGallery.tsx

"use client";

import { cn } from "@/app/lib/cn";
import Image, { type StaticImageData } from "next/image";
import { useState, type FC } from "react";

type ProductGalleryProps = {
  images: readonly StaticImageData[];
  alt: string;
};

const ProductGallery: FC<ProductGalleryProps> = ({ images, alt }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className="flex w-full shrink-0 flex-col gap-2.5 sm:gap-3 lg:w-[42%] lg:max-w-100">
      <div className="relative aspect-square w-full overflow-hidden rounded-xl sm:rounded-2xl">
        <Image src={images[activeIndex]} alt={alt} fill priority className="object-cover" sizes="(max-width: 1024px) 100vw, 400px" />
      </div>

      <div className="grid grid-cols-4 gap-2 sm:gap-2.5">
        {images.slice(0, 4).map((image, index) => (
          <button
            key={index}
            type="button"
            aria-label={`تصویر ${index + 1}`}
            aria-pressed={activeIndex === index}
            onClick={() => setActiveIndex(index)}
            className={cn("relative aspect-square overflow-hidden rounded-lg transition-shadow sm:rounded-xl", activeIndex === index && "ring-2 ring-primary ring-offset-1")}
          >
            <Image src={image} alt="" fill className="object-cover" sizes="(max-width: 1024px) 22vw, 96px" />
          </button>
        ))}
      </div>
    </div>
  );
};

export default ProductGallery;