import React from "react";

function Slides({ slides }) {
  const [inital, setInitial] = React.useState(0)

  const handlePrev = ()=>{
    if(slides.length>0 && inital > 0 && inital!== slides.length){
      setInitial(inital-1)
    }
  }

  const handleNext = ()=>{
    if(slides.length>0 && inital < slides.length-1){
      setInitial(inital+1)
    }
  }

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

export default Slides;