import React, {useState} from "react";

function Slides({ slides }) {
  if (slides.length === 0) return null;

  const [slideNo, setSlideNo] = useState(0);
  
  const restartSlide = () => setSlideNo(0);
  const handleSlideMove = (isNextSlide = true) => setSlideNo(prevSlideNo => isNextSlide ? prevSlideNo + 1 : prevSlideNo - 1);

  const { title, text } = slides[slideNo];
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" disabled={slideNo === 0} onClick={restartSlide}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" disabled={slideNo === 0} onClick={() => handleSlideMove(false)}>
          Prev
        </button>
        <button data-testid="button-next" className="small" disabled={slideNo + 1 === slides.length} onClick={() => handleSlideMove()}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{title}</h1>
        <p data-testid="text">{text}</p>
      </div>
    </div>
  );
}

export default Slides;