import React from "react";

function Slides({ slides }) {

  const [slide, setSlide] = React.useState(0);
  const handleNext = () => {
    setSlide(slide+1)
  }
  const handlePrev = () => {
    setSlide(slide-1)
  }
  const handleRestart = () => {
    setSlide(0)
  }
  const hasNext = slide < 4
  const hasPrev = slide > 0
  const canRestart = slide>0

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={handleRestart} disabled={!canRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={handlePrev} disabled={!hasPrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small"
        onClick={handleNext} disabled={!hasNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[slide].title}</h1>
        <p data-testid="text">{slides[slide].text}</p>
      </div>
    </div>
  );
}

export default Slides;