import React, { useState } from "react";

function Slides({ slides }) {
  const [idx, setIdx] = useState(0)
  const slideLength=slides.length-1;
  let title = slides[idx].title;
  let text = slides[idx].text;

  const handleRes = () => {
    setIdx(idx=>0)    
  }
  const handlePrev = () => {
    setIdx(idx=>idx-1)
  }
  const handleNext = () => {      
    setIdx(idx=>idx+1)   
  }


  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={handleRes} disabled={idx===0?true:false}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={handlePrev} disabled={idx===0?true:false}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={handleNext} disabled={idx===(slideLength)?true:false}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{title}</h1>
        <p data-testid="text">{text}</p>
      </div>
    </div>
  );


  
}

export default Slides;