import Image from "next/image";
import "./ReportImages.scss";
import default_image_icon from "./icons/default-image.svg";

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

interface IReportImagesProps {
  images: IImage[];
}

const ReportImages: React.FC<IReportImagesProps> = ({
  images,
}: IReportImagesProps) => {
  const showImages = () => {
    let result = [];

    for (let i = 0; i < 5; i++) {
      if (images.length > i) {
        result.push(
          <img
            className={`report-images-${i + 1}`}
            key={i}
            src={images[i].image}
            alt="Road Image"
          />
        );
      } else {
        result.push(
          <div className={`report-images-default-${i + 1}`} key={i}>
            <Image
              src={default_image_icon}
              alt="Default Image Icon"
            />
            {i + 1 === 1
              ? "Пользователь не загрузил изображения"
              : ""}
          </div>
        );
      }
    }

    return result;
  };
  return <div className="report-images">{showImages()}</div>;
};

export default ReportImages;
