import React, { useState } from "react";

function Slides({ slides }) {
  const [index, setIndex] = useState(0)

  const handleRestart = () => setIndex(0)
  const handlePrev = () => setIndex(prev => prev - 1)
  const handleNext = () => setIndex(prev => prev + 1)

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

export default Slides;