import React, { useEffect, useState } from 'react'
import { Carousel } from '../../types';
import iconPrueba from '../..//public/Carousel/previous.svg'

export default function Carousel({ images, icons } : Carousel){
    const [currentImageIndex, setCurrentImageIndex] = useState(0);
    let intervalId : number;

    const goToNextImage = () => {
      setCurrentImageIndex((prevIndex) => 
        prevIndex === images.length - 1 ? 0 : prevIndex + 1
      );
    };
  
    const goToPreviousImage = () => {
      setCurrentImageIndex((prevIndex) =>
        prevIndex === 0 ? images.length - 1 : prevIndex - 1
      );
    };

    // Si se requiere que las aimagenes estes cambiando cada cierto tiempo
    // const resetInterval = () => {
    //     clearInterval(intervalId); // Clear existing interval
    //     intervalId = setInterval(goToNextImage, 6000); // Set new interval
    //   };
    
      useEffect(() => {
        // resetInterval(); // Start the interval
        return () => clearInterval(intervalId); // Cleanup function to clear interval on unmount
      }, [currentImageIndex]);
  
    return (
      <div style={{position: 'relative'}}>
        <img src={iconPrueba} onClick={goToPreviousImage} style={{position: 'absolute', left: '15px', top: '50%', color: 'white'}} />
        {/* <button onClick={goToPreviousImage} style={{position: 'absolute', left: '15px', top: '50%', color: 'white'}}>{iconPrueba}</button> */}
        {images.slice(3).map((image, index) => (
            <img style={{height: '400px', width: '700px', objectFit: 'contain'}} src={images[currentImageIndex].route } alt={`Image ${index + 1}`} />
        ))}
        {/* <button onClick={goToNextImage} style={{position: 'absolute', right: '15px', top: '50%', color: 'white'}}>{icons[1]}</button> */}
        <img src={iconPrueba} onClick={goToNextImage} style={{position: 'absolute', right: '15px', top: '50%', color: 'white'}} />
      </div>
    );
  };