"use client";

import { Maximize2, X } from "lucide-react";
import { useState } from "react";

export default function ProductGallery({
  images,
  title,
}: {
  images: string[];
  title: string;
}) {
  const [activeImage, setActiveImage] = useState(images[0]);
  const [lightboxOpen, setLightboxOpen] = useState(false);

  return (
    <>
      <div className="product-gallery">
        <button
          className="product-gallery__main"
          type="button"
          onClick={() => setLightboxOpen(true)}
          aria-label={`نمایش بزرگ تصویر ${title}`}
        >
          <img src={activeImage} alt={title} />
          <span>
            <Maximize2 size={18} />
            مشاهده تصویر
          </span>
        </button>

        {images.length > 1 && (
          <div className="product-gallery__thumbs">
            {images.map((image, index) => (
              <button
                className={image === activeImage ? "active" : ""}
                type="button"
                key={`${image}-${index}`}
                onClick={() => setActiveImage(image)}
                aria-label={`تصویر ${index + 1} از ${title}`}
              >
                <img src={image} alt={`${title}، تصویر ${index + 1}`} />
              </button>
            ))}
          </div>
        )}
      </div>

      {lightboxOpen && (
        <div
          className="product-lightbox"
          role="dialog"
          aria-modal="true"
          aria-label={`گالری ${title}`}
          onClick={() => setLightboxOpen(false)}
        >
          <button
            type="button"
            onClick={() => setLightboxOpen(false)}
            aria-label="بستن گالری"
          >
            <X />
          </button>
          <img
            src={activeImage}
            alt={title}
            onClick={(event) => event.stopPropagation()}
          />
        </div>
      )}
    </>
  );
}