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

// core components
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import Icon from "@material-ui/core/Icon";
import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/workStyle.js";
import Carousel from "react-slick";
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import stylecss from "pages-sections/home/business-partner.css";

import yamaha from 'assets/img/home/yamaha1.jpg';
import suzuki from 'assets/img/home/suzuki.jpg';
import mercedes from 'assets/img/home/mercedes.jpg';
import hino from 'assets/img/home/hino.jpg';
import honda from 'assets/img/home/honda.jpg';
import pim from 'assets/img/home/pim.jpg';
import emilia from 'assets/img/home/emilia.jpg';
import bpr from 'assets/img/home/bpr.jpg';
import home from 'assets/img/home/home.jpg';

const useStyles = makeStyles(styles);
export default function WorkSection() {
    const classes = useStyles();
    console.log(stylecss.container);
    return (
        <div>
            <GridContainer justify="center" color="dark">
                <GridItem xs={12} sm={12}>
                    <h2 className={classes.title}>Thamrin Group Businees Partner</h2>
                </GridItem>
            </GridContainer>
            <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={12} sm={12} className={classes.marginAuto}>
                    <Carousel>
                    <div className="container">
                    <img src={yamaha} alt="Snow" style={{width:"100%"}}/>
                        <Button href="/yamaha/home" target="_blank" className="btn">Visit Page</Button>
                    </div>
                    </Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
                    <Carousel>
                    <div className="container">
                    <img src={suzuki} alt="Snow" style={{width:"100%"}}/>
                        <Button href="/suzuki/home" target="_blank" className="btn">Visit Page</Button>
                    </div>
                    </Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
                    <Carousel><img src={honda}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={hino}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={mercedes}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={emilia}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={bpr}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={pim}/></Carousel>
                </Grid>
                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
                    <Carousel><img src={home}/></Carousel>
                </Grid>
            </Grid>
    </div>
        </div>
    );
}