import './App.css';
import {useState } from 'react';

const Dots = ({count,active, onChange}) =>{
  let arrImg = []; 
  for (let i = 0; i < count; i++) {
    arrImg.push(i)
  }
 
   return (
    <>
   
    <ul>
      {arrImg.map(( _, index) => <li key = {index} className = {`dotBase ${active === index? 'dotActive' : 'dotNotActive'}`} onClick = {() => onChange(index)}></li>)}
    </ul>
      
    </>
  )
}

const Gallery = ({images = ['https://kot-pes.com/wp-content/uploads/2018/12/post_5c249026dde11.jpg',
'https://bigpicture.ru/wp-content/uploads/2019/12/DmrVIH7W4AAU_90-800x533.jpg', 
'https://lh3.googleusercontent.com/proxy/NBss1i5HXdYP-YI9ygt53JYbC1CZm1SDRk8o5DGZqp_Nr_LZ6Me47RRn8Rex4_goswBpwPGakuNWO7HIifvorG5Rwm3tSWFbXclY8ANMBMRwlQ18U-wpGbzn8OXfaQX15W7dNdp8']}) => {

  const [index, setIndex] = useState(0);

  function next () { 
    if(index === (images.length - 1)) { 
      setIndex(0);
    } else setIndex(index + 1);
  }

  function back () { 
    if(index === 0) { 
      setIndex(images.length - 1);
    } else setIndex(index - 1);
  }
  function change (id) { 
    setIndex(id)

  }

  return (
    <>
      <img className = "carousel-item" src = {images[index]} alt="cat"></img>
      <Dots count = {images.length} active = {index}  onChange = {change}/>
      <button onClick = {next}>Вперед</button>
      <button onClick= {back}>Назад</button>
      
    </>
  )
}

function App() {
  return (
    <div className="App">
      <Gallery/>
    </div>
  );
}

export default App;
