import React,{useState} from "react";

function Slides({ slides }) {
const [currentId, setCurrentId] = useState(0);

const handleRestart =()=>{
setCurrentId(0);
};
const handlePrev =()=>{
if(currentId>0){
setCurrentId(currentId -1);
}
};

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

export default Slides;