text: import React, { useEffect, useState } from "react";
  import http from "../../common-http";
  
  // reactstrap components
  import {
    Card,
    Container,
    Row,
    Col,
    Carousel,
    CarouselItem,
    CarouselIndicators,
    CarouselCaption,
  } from "reactstrap";
  
  // core components
  
  const items = [];
  
  function LocationCarousel() {
    const [locations, setLocations] = useState([]);
  
    useEffect(() => {
      loadData();
    }, []);
  
    const loadData = async () => {
      const res = await http.get("locations");
      setLocations(res.data);
    };
  
    const [activeIndex, setActiveIndex] = React.useState(0);
    const [animating, setAnimating] = React.useState(false);
    const onExiting = () => {
      setAnimating(true);
    };
    const onExited = () => {
      setAnimating(false);
    };
    const next = () => {
      if (animating) return;
      const nextIndex =
        activeIndex === locations.length - 1 ? 0 : activeIndex + 1;
      setActiveIndex(nextIndex);
    };
    const previous = () => {
      if (animating) return;
      const nextIndex =
        activeIndex === 0 ? locations.length - 1 : activeIndex - 1;
      setActiveIndex(nextIndex);
    };
    const goToIndex = (newIndex) => {
      if (animating) return;
      setActiveIndex(newIndex);
    };
    return (
      <>
        <div className="section pt-o" id="carousel">
          <Container>
            <h2 className="title">
              <b>LOCATIONS</b>
            </h2>
            <Row>
              <Col className="ml-auto mr-auto" md="8">
                <Card className="page-carousel">
                  <Carousel
                    activeIndex={activeIndex}
                    next={next}
                    previous={previous}
                  >
                    <CarouselIndicators
                      items={items}
                      activeIndex={activeIndex}
                      onClickHandler={goToIndex}
                    />
                    {locations.map((location) => {
                      return (
                        <CarouselItem
                          onExiting={onExiting}
                          onExited={onExited}
                          key={location.location_id}
                        >
                          <img src={location.location_image} alt="" />
                          <CarouselCaption
                            captionText={location.location_name}
                            captionHeader=""
                          />
                        </CarouselItem>
                      );
                    })}
                    <a
                      className="left carousel-control carousel-control-prev"
                      data-slide="prev"
                      href="#pablo"
                      onClick={(e) => {
                        e.preventDefault();
                        previous();
                      }}
                      role="button"
                    >
                      <span className="fa fa-angle-left" />
                      <span className="sr-only">Previous</span>
                    </a>
                    <a
                      className="right carousel-control carousel-control-next"
                      data-slide="next"
                      href="#pablo"
                      onClick={(e) => {
                        e.preventDefault();
                        next();
                      }}
                      role="button"
                    >
                      <span className="fa fa-angle-right" />
                      <span className="sr-only">Next</span>
                    </a>
                  </Carousel>
                </Card>
              </Col>
            </Row>
          </Container>
        </div>{" "}
      </>
    );
  }
  
  export default LocationCarousel;
  