import React, { Component } from "react";
import Helmet from "react-helmet";
import {
	CarouselProvider,
	Slider,
	Slide,
	ButtonBack,
	ButtonNext
} from "pure-react-carousel";
import carouselCss from "!raw-loader!pure-react-carousel/dist/react-carousel.es.css"; // eslint-disable-line

class CustomCard extends Component {
	render() {
		return (
			<>
				<Helmet>
					<style type="text/css">{carouselCss}</style>
				</Helmet>
				<CarouselProvider
					naturalSlideWidth={100}
					naturalSlideHeight={125}
					totalSlides={3}
				>
					<Slider>
						<Slide index={0}>I am the first Slide.</Slide>
						<Slide index={1}>I am the second Slide.</Slide>
						<Slide index={2}>I am the third Slide.</Slide>
					</Slider>
					<ButtonBack>Back</ButtonBack>
					<ButtonNext>Next</ButtonNext>
				</CarouselProvider>
			</>
		);
	}
}

export default CustomCard;