/*eslint-disable*/
import React from "react";
import {Link} from 'react-scroll'

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

// import People from "@material-ui/core/People";
import stylecss from "components/Header/HeaderHome.css";

// @material-ui/icons
import { Apps, ShareTwoTone } from "@material-ui/icons";

// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";

import Image from "assets/img/Blue.png";
const useStyles = makeStyles(styles);

export default function HeaderHome(props) {
    const classes = useStyles();
    return (
    <div align="left">
        <List className={classes.list}>
        <ListItem className={classes.listItem}>
        <Link href="#">
        <Button color="transparent" className={classes.navLink}>
            <img
                src={Image} width="180px"
            />
            </Button>
        </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link to="home" spy={true} smooth={true}>
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <div className="header"><Icon className={classes.icons}>home</Icon>Home</div>
            </Button>
            </Link>
        </ListItem>
        {/* <ListItem className={classes.listItem}>
            <Link href='#section1'>
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>card_travel</Icon> Core Value
            </Button>
            </Link>
        </ListItem> */}
        <ListItem className={classes.listItem}>
            <Link to="business_partner" spy={true} smooth={true}>
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <div className="header"><Icon className={classes.icons}>business</Icon> Businees Partner</div>
            </Button>
            </Link>
        </ListItem>
        {/* <ListItem className={classes.listItem}>
            <Link href="#">
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>perm_identity</Icon> About Us
            </Button>
            </Link>
        </ListItem> */}
        <ListItem className={classes.listItem}>
            <Link to="gallery" spy={true} smooth={true}>
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <div className="header"><Icon className={classes.icons}>dashboard</Icon> Gallery</div>
            </Button>
            </Link>
        </ListItem>
        </List>
        </div>
    );
}