brb-store/components/product/ProductGallery.tsx

"use client";

import { useState } from "react";
import { X } from "lucide-react";
import { Placeholder } from "@/components/Placeholder";

export function ProductGallery({ images, alt }: { images: string[]; alt: string }) {
  const gallery = images.length ? images : ["/placeholders/product.svg"];
  const [active, setActive] = useState(0);
  const [lightbox, setLightbox] = useState(false);
  const [origin, setOrigin] = useState("50% 50%");
  const [zoomed, setZoomed] = useState(false);
  const current = gallery[active] ?? gallery[0];

  return (
    <>
      <div>
        <button
          type="button"
          className="relative block aspect-square w-full overflow-hidden rounded-2xl bg-paper"
          onClick={() => setLightbox(true)}
          onMouseEnter={() => setZoomed(true)}
          onMouseLeave={() => {
            setZoomed(false);
            setOrigin("50% 50%");
          }}
          onMouseMove={(event) => {
            const box = event.currentTarget.getBoundingClientRect();
            const x = ((event.clientX - box.left) / box.width) * 100;
            const y = ((event.clientY - box.top) / box.height) * 100;
            setOrigin(`${x}% ${y}%`);
          }}
        >
          <Placeholder
            src={current}
            fallbackSrc="/placeholders/product.svg"
            alt={alt}
            className="absolute inset-0 size-full object-cover transition-transform duration-150"
          />
          <span
            className="pointer-events-none absolute inset-0 bg-cover bg-center bg-no-repeat"
            style={{
              backgroundImage: `url(${current})`,
              transform: zoomed ? "scale(1.85)" : "scale(1)",
              transformOrigin: origin,
              opacity: zoomed ? 1 : 0,
            }}
          />
        </button>
        {gallery.length > 1 ? (
          <div className="mt-3 flex gap-2 overflow-x-auto">
            {gallery.map((image, index) => (
              <button
                key={`${image}-${index}`}
                type="button"
                onClick={() => setActive(index)}
                className={`size-16 shrink-0 overflow-hidden rounded-xl border ${index === active ? "border-brand" : "border-line"}`}
              >
                <Placeholder src={image} alt="" className="size-full object-cover" />
              </button>
            ))}
          </div>
        ) : null}
      </div>

      {lightbox ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/80 p-4" onClick={() => setLightbox(false)}>
          <button
            type="button"
            className="absolute top-4 left-4 grid size-10 place-items-center rounded-full bg-white text-ink"
            aria-label="بستن"
          >
            <X className="size-5" />
          </button>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={current}
            alt={alt}
            className="max-h-[90vh] max-w-full rounded-2xl object-contain"
            onClick={(event) => event.stopPropagation()}
          />
        </div>
      ) : null}
    </>
  );
}