import React, { useState, useEffect } from "react";

import { ReactComponent as EmptyState1 } from "../../assets/emptyState1.svg";
import { ReactComponent as EmptyState2 } from "../../assets/emptyState2.svg";
import { ReactComponent as EmptyState3 } from "../../assets/emptyState3.svg";
import { ReactComponent as EmptyState4 } from "../../assets/emptyState4.svg";
import { ReactComponent as EmptyState5 } from "../../assets/emptyState5.svg";
import { ReactComponent as EmptyState6 } from "../../assets/emptyState6.svg";
const images = [
  EmptyState1,
  EmptyState2,
  EmptyState3,
  EmptyState4,
  EmptyState5,
  EmptyState6,
];

const EmptyStateImageComponent = () => {
  const [prevImage, setPrevImage] = useState(null);
  const [currentImage, setCurrentImage] = useState(0);

  useEffect(() => {
    let randomIndex = Math.floor(Math.random() * images.length);
    // Prevent consecutive repeat
    if (prevImage !== null && randomIndex === prevImage) {
      randomIndex = (randomIndex + 1) % images.length;
    }
    setCurrentImage(randomIndex);
    setPrevImage(randomIndex);
  }, []);

  const ImageComponent = images[currentImage];
  return <ImageComponent />;
};

export default EmptyStateImageComponent;
