import React from "react";
import { Carousel} from "react-bootstrap";
import styled from "styled-components";
import firstSlide from '../img/wheel_of_high.jpg'
import secondSlide from '../img/stalker_header_2.jpg'
import thirdSlide from '../img/stalker_header.jpg'


const Styled = styled.div`
  .carousel-item{
    height: 600px;
  }
  .carousel-caption {
    font-family: Stalker;
    font-size: 1.4rem;
  }
  @media (min-width: 768px) {
    .carousel-item{
      height: 400px;
    }
  
  }
  @media (max-width: 576px) {
    .carousel-item {
      height:100%;
    } 
  }
  
`;

export default function Slider() {

    return(
        <>
        <Styled>
            <Carousel fade>
                
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={firstSlide}
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={secondSlide}
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={thirdSlide}
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

</Styled>
</>
    );
}