import React from "react";
import ImageGallery from "react-image-gallery";
import { useImageGallery } from "../../hooks/useImageGallery";

export const FeatureImageGallery = ({
  images,
}: Record<string, any>): JSX.Element => {
  const { galleryRef, handleScreenChange, handleFullscreen } =
    useImageGallery();

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        margin: "1rem 0",
        maxWidth: "1100px",
      }}
    >
      <ImageGallery
        items={images.map(
          (image: {
            original: string | undefined;
            originalAlt: string;
            originalClass: string;
          }) => ({
            ...image,
            renderItem: () => (
              <img
                key={image.original}
                style={{ width: "auto" }}
                src={image.original}
                alt={image.originalAlt}
              />
            ),
          })
        )}
        ref={galleryRef}
        showPlayButton={false}
        showFullscreenButton={false}
        autoPlay={true}
        slideInterval={3000}
        lazyLoad={true}
        onClick={() => handleFullscreen()}
        onScreenChange={(isFullScreen) => handleScreenChange(isFullScreen)}
        showNav={false}
        showBullets={images.length > 1}
      />
    </div>
  );
};