import React from "react";

/**
 * 
 * @param {{slides: {title: string, text: string}}} 
 */
function Slides({ slides }) {
  const [activeSlideIndex, setActiveSlideIndex] = React.useState(0)
  const activeSlide = slides[activeSlideIndex]
  const isLastItem = activeSlideIndex === slides.length - 1
  const isFirstItem = activeSlideIndex === 0

  const handleRestart = () => {
    setActiveSlideIndex(0)
  }

  const handleNext = () => {
    if (isLastItem) {
      return null
    }
    setActiveSlideIndex(prev => prev + 1)
  }
  const handlePrev = () => {
    if (isFirstItem) {
      return null
    }
    setActiveSlideIndex(prev => prev - 1)
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button onClick={handleRestart} disabled={isFirstItem} data-testid="button-restart" className="small outlined">Restart</button>
        <button onClick={handlePrev} disabled={isFirstItem} data-testid="button-prev" className="small">Prev</button>
        <button onClick={handleNext} disabled={isLastItem} data-testid="button-next" className="small">Next</button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{activeSlide.title}</h1>
        <p data-testid="text">{activeSlide.text}</p>
      </div>

    </div>
  );
}

export default Slides;