import React, { useState } from "react";

function Slides({ slides }) {
  const [currentIdx, setCurrentIdx] = useState(0);

  const handleRestart = () => {
    setCurrentIdx(0);
  }

  const handlePrev = () => {
    setCurrentIdx((prev) => prev-1);
  }

  const handleNext = () => {
    setCurrentIdx((prev) => prev+1);
  }

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

export default Slides;