import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

import image1 from "assets/img/core1.png";
import image2 from "assets/img/core2.png";

const useStyles = makeStyles(styles);
const CoreValue = function ({ backend, carousel, ...props })  {
    const classes = useStyles();
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        time: 5
    };

    return (
        <div className={classes.section} id="notifications">
            <div className={classes.section}>
            <div className={classes.container}>
                <GridContainer>
                <GridItem className={classes.marginAuto}>
                <div align="center">
                    <h2>Core Value Company</h2>
                </div>
                <Card carousel>
                    <Carousel {...settings}>
                        <div>
                            <img src={image1} alt="First slide" className="slick-image" />
                        </div>
                        <div>
                            <img src={image2} alt="First slide" className="slick-image" />
                        </div>
                    </Carousel>
                </Card>
                </GridItem>
                </GridContainer>
            </div>
            </div>
        </div>
    );
}

export default CoreValue;