kgroad-frontend2/src/widgets/report-details/ReportImages/ReportImages.tsx

"use client";

import "./ReportImages.scss";
import { useEffect, useState } from "react";

interface IReportImagesProps {
  images: IImage[];
}

interface IImage {
  id: number;
  image: string;
}

const ReportImages: React.FC<IReportImagesProps> = ({
  images,
}: IReportImagesProps) => {
  const [mainImage, setMainImage] = useState<IImage>(images[0]);
  const [width, setWidth] = useState<number>(0);
  const filterImages = images.filter((i) => i.id !== mainImage.id);
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  const handleMainImage = (image: IImage) => {
    if (width <= 550) return;

    setMainImage(image);
  };

  return (
    <div className="report-images">
      <div className="report-images__list">
        <img
          className="report-images__main"
          src={mainImage.image}
          alt="Report Main Image"
        />
        {filterImages.map((image) => (
          <button
            key={image.id}
            onClick={() => handleMainImage(image)}
          >
            <img
              className="report-images__item"
              src={image.image}
              alt="Report Image"
            />
          </button>
        ))}
      </div>
    </div>
  );
};

export default ReportImages;