function Slides({ slides }) {
  const [currentSlideIndex, SetReset] = React.useState(0);

  function handleReset(){
      SetReset(0);
  }

  function handleNext(){
    SetReset(currentSlideIndex => ++currentSlideIndex);
  }

  function handlePrevious(){
    SetReset(currentSlideIndex => --currentSlideIndex);

  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" disabled = {currentSlideIndex === 0}
          onClick={() => handleReset()} >
          Restart
        </button>
        <button data-testid="button-prev" className="small" disabled = {currentSlideIndex === 0} onClick={() => handlePrevious()}>
          Prev
        </button>
        <button data-testid="button-next" className="small" disabled = {currentSlideIndex ===  slides.length - 1} onClick={() => handleNext()}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[currentSlideIndex].title}</h1>
        <p data-testid="text">{slides[currentSlideIndex].text}</p>
      </div>
    </div>
  );
}

export default Slides;