text: import React from 'react';
  import CarouselItem from './CarouselItem';
  import shuttle from '../images/carousel-shuttle.jpeg';
  import shuttleSm from '../images/carousel-shuttle-sm.jpeg';
  import shuttleMd from '../images/carousel-shuttle-md.jpeg';
  import shuttleLg from '../images/carousel-shuttle-lg.jpeg';
  import shuttleXl from '../images/carousel-shuttle-xl.jpeg';
  import space from '../images/carousel-space.jpeg';
  import spaceSm from '../images/carousel-space-sm.jpeg';
  import spaceMd from '../images/carousel-space-md.jpeg';
  import spaceLg from '../images/carousel-space-lg.jpeg';
  import spaceXl from '../images/carousel-space-xl.jpeg';
  import moon from '../images/carousel-moon.jpeg';
  import moonSm from '../images/carousel-moon-sm.jpeg';
  import moonMd from '../images/carousel-moon-md.jpeg';
  import moonLg from '../images/carousel-moon-lg.jpeg';
  import moonXl from '../images/carousel-moon-xl.jpeg';
  import arrowLeft from '../images/arrow-left.svg';
  import arrowRight from '../images/arrow-right.svg';
  
  class Carousel extends React.PureComponent {
    render() {
      return(
        <div className="carousel">
          <div className="container carousel__wrapper">
            <button className="carousel__arrow carousel__previous">
              <img src={arrowLeft} alt="Previous"
                className="carousel__arrow-img"
              />
            </button>
            <div className="row">
              <div className="col-md-4">
                <CarouselItem
                  imgSrc={shuttle}
                  imgSrcSm={shuttleSm}
                  imgSrcMd={shuttleMd}
                  imgSrcLg={shuttleLg}
                  imgSrcXl={shuttleXl}
                  imgAlt="The view from inside a space shuttle"
                  title="International Space Station"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus aliquet sapien..."
                />
              </div>
              <div className="col-md-4 carousel__hidden">
                <CarouselItem
                  imgSrc={space}
                  imgSrcSm={spaceSm}
                  imgSrcMd={spaceMd}
                  imgSrcLg={spaceLg}
                  imgSrcXl={spaceXl}
                  imgAlt="A space shuttle floating in space"
                  title="My capsule"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus aliquet sapien..."
                />
              </div>
              <div className="col-md-4 carousel__hidden">
                <CarouselItem
                  imgSrc={moon}
                  imgSrcSm={moonSm}
                  imgSrcMd={moonMd}
                  imgSrcLg={moonLg}
                  imgSrcXl={moonXl}
                  imgAlt="Earth's moon partially obscured"
                  title="My moon"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus aliquet sapien..."
                />
              </div>
            </div>
            <button className="carousel__arrow carousel__next">
              <img src={arrowRight} alt="Next" className="carousel__arrow-img" />
            </button>
          </div>
          <div className="container">
            <ol className="list-unstyled carousel__bullets">
              <li>
                <button className="carousel__bullet carousel__bullet--active" />
              </li>
              <li>
                <button className="carousel__bullet" />
              </li>
              <li>
                <button className="carousel__bullet" />
              </li>
              <li>
                <button className="carousel__bullet" />
              </li>
              <li>
                <button className="carousel__bullet" />
              </li>
              <li>
                <button className="carousel__bullet" />
              </li>
            </ol>
          </div>
        </div>
      );
    }
  }
  
  export default Carousel;
  