import React, { useState } from 'react';
import {items} from '../data/Details.js';

import {
  Container,
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from 'reactstrap';



const Carousels = (props) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [animating, setAnimating] = useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  }

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  }

  const goToIndex = (newIndex) => {
    if (animating) return;
    setActiveIndex(newIndex);
  }

  const slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.key}
      > 
      <div className="container d-md-none d-block">
        <h2 className="text-white text-center" style={{marginTop:"150px"}}>{item.header}</h2>
        <h4 className="text-white text-center" >{item.caption}</h4> 
      </div>
        <img className="img-fluid d-none d-md-block"  src={item.src} alt=""></img>
        <CarouselCaption className="orange text-white" captionText={item.caption} captionHeader={item.header} />
      </CarouselItem>
    );
  });

  return (
    <Container style={{marginTop:"90px"}} >
       <Carousel className="bg-orange round-border"
      activeIndex={activeIndex}
      next={next}
      previous={previous}
    >
      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
      {slides}
      <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
      <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
    </Carousel>
    </Container>
   
  );
}

export default Carousels;