function Slides({ slides }) {
  const [index, setIndex] = useState(0)

  const event = {
    on: {
      prev: () => {
        const position = index - 1
        setIndex(position)
      },
      next: () => {
        const position = index + 1
        setIndex(position)
      },
      restart: () => {
        setIndex(0)
      }
    }
  }

  const hide = {
    on: {
      first: index === 0,
      last: index === slides.length - 1,
    }
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button disabled={hide.on.first} onClick={event.on.restart} data-testid="button-restart" className="small outlined">
          Restart
        </button>
        <button disabled={hide.on.first} onClick={event.on.prev} data-testid="button-prev" className="small">
          Prev
        </button>
        <button disabled={hide.on.last} onClick={event.on.next} data-testid="button-next" className="small">
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[index].title}</h1>
        <p data-testid="text">{slides[index].text}</p>
      </div>
    </div>
  )
}