src/app/help/ImageSlider.js

// components/ImageSlider.jsx
"use client";
import { useState, useEffect } from 'react';
import ImageContainer from './ImageContainer';
import './styles/ImageSlider.css';
import { SLIDER_IMAGES } from './helpData';

const ImageSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % SLIDER_IMAGES.length);
    }, 3000);
    return () => clearInterval(timer);
  }, [SLIDER_IMAGES.length]);

  return (
    <div className="help-image-slider">
      <div className="slider-container" style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
        {SLIDER_IMAGES.map((src, index) => (
          <div key={index} className="slide">
            <ImageContainer
              src={src}
              alt={`Help guide slide ${index + 1}`}
              containerClass="slide-image-container"
              className="slide-image"
              sizes="100vw"
            />
          </div>
        ))}
      </div>
      <div className="slider-dots">
        {SLIDER_IMAGES.map((_, index) => (
          <button
            key={index}
            className={`dot ${index === currentIndex ? 'active' : ''}`}
            onClick={() => setCurrentIndex(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default ImageSlider;