/*eslint-disable*/
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// nodejs library that concatenates classes
import classNames from "classnames";
// material-ui core components
import { List, ListItem } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Favorite from "@material-ui/icons/Favorite";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/components/footerStyle.js";

import Logo from "assets/img/White.png";

// import iconfb from "assets/img/sosmed/iconfb.png";
// import iconig from "assets/img/sosmed/iconig.png";
// import icontwt from "assets/img/sosmed/icontwt.png";
// import iconyt from "assets/img/sosmed/iconyt.png";

const useStyles = makeStyles(styles);

export default function Footer(props) {
    const classes = useStyles();
    const { whiteFont } = props;
    const footerClasses = classNames({
        [classes.footer]: true,
        [classes.footerWhiteFont]: whiteFont
    });
    const aClasses = classNames({
        [classes.a]: true,
        [classes.footerWhiteFont]: whiteFont
    });
    return (
        <div>
        <GridContainer style={{padding: "40px"}} justify="center">
        <Grid>
            <div align="center" style={{marginTop:"-20px"}}>
                <br></br>
            <img className={classes.imgCard} src={Logo} style={{width:"500px"}}/>
            </div>
        </Grid>
        <Grid>
            <div>
            <footer className={footerClasses}>
                <div className={classes.container}>
                <div className={classes.left}>
                    <List className={classes.list}>
                    <ListItem className={classes.inlineBlock}>
                        <a href="/yamaha/home" target="_blank" className={classes.block} > Yamaha </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="/suzuki/home" target="_blank" className={classes.block}> Suzuki </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="/honda/home" target="_blank" className={classes.block}> Honda </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="/hino/home" target="_blank" className={classes.block}> Hino </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" target="_blank" className={classes.block}> Mercedes Benz </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="http://www.emilia-hotel.com/" target="_blank" className={classes.block}> Emilia Hotel </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="https://www.instagram.com/palembangindahmall/?hl=id" target="_blank" className={classes.block}> Palembang Indah Mall </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="http://bprberkatsejati.com/" target="_blank" className={classes.block}> BRP Berkat Sejati </a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="http://homes.thamrin.xyz/" target="_blank" className={classes.block}> Thamrin Homes </a>
                    </ListItem>
                    </List>
                </div>
                </div>
            </footer>
            </div>
        </Grid>
        </GridContainer>
        <GridContainer style={{marginTop: "-100px", padding:"50px"}} justify="center">
        <Grid>
            <div>
            <footer className={footerClasses}>
                <div className={classes.container}>
                <div className={classes.left}>
                <List className={classes.list}>
                    <ListItem className={classes.inlineBlock}>
                        <a href="#" target="_blank" className={classes.block} >Facebook</a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="#" target="_blank" className={classes.block}>Instagram</a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="#" target="_blank" className={classes.block}>Twitter</a>
                    </ListItem>
                    <ListItem className={classes.inlineBlock}>
                        <a href="#" target="_blank" className={classes.block}>Youtube</a>
                    </ListItem>
                    </List>
                </div>
                </div>
            </footer>
            </div>
        </Grid>
        </GridContainer>
        <GridContainer style={{marginTop: "-40px"}} justify="center">
        <Grid>
        <div align="center">
        <div className={classes.right}>
                &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
            </div>
        </div>
        </Grid>
    </GridContainer>
    </div>
    );
}

Footer.propTypes = {
    whiteFont: PropTypes.bool
};