function Slides({ slides }) {

  const [firstSlide, setFirstSlide] = useState(0)

  const nextSlide = () => {
    let silde = firstSlide ;
    silde++;
    setFirstSlide(silde)
  }
  const prevSlide = () => {
    let silde = firstSlide ;
    silde--;
    setFirstSlide(silde)
  }

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