text: /*eslint-disable*/
  import React from "react";
  import DeleteIcon from "@material-ui/icons/Delete";
  import IconButton from "@material-ui/core/IconButton";
  // import AccountCircle from "@material-ui/icons/AccountCircle";
  // react components for routing our app without refresh
  import { Link } from "react-router-dom";
  
  // @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 Tooltip from "@material-ui/core/Tooltip";
  
  // @material-ui/icons
  import { Apps, AccountCircle, CloudDownload } from "@material-ui/icons";
  
  // core components
  import CustomDropdown from "../CustomDropdown/CustomDropdown.js";
  import Button from "../CustomButtons/Button.js";
  
  import styles from "../../../jss/material-kit-react/components/headerLinksStyle.js";
  
  const useStyles = makeStyles(styles);
  
  export default function HeaderLinks(props) {
    const classes = useStyles();
    return (
      <List className={classes.list}>
        <ListItem className={classes.listItem}>
          <CustomDropdown
            noLiPadding
            buttonText="Menu"
            buttonProps={{
              className: classes.navLink,
              color: "transparent"
            }}
            buttonIcon={Apps}
            dropdownList={[
              <Link to="/profile" className={classes.dropdownLink}>
              Profil
            </Link>,
              <Link to="/components" className={classes.dropdownLink}>
                Composants
              </Link>,
              // <a
              //   href="https://creativetimofficial.github.io/material-kit-react/#/documentation?ref=mkr-navbar"
              //   target="_blank"
              //   className={classes.dropdownLink}
              // >
              <Link to="/messages/" className={classes.dropdownLink}>
                Messages
              </Link>,
              <Link to="/bookings/" className={classes.dropdownLink}>
              Réservations
            </Link>
              // </a>
            ]}
          />
        </ListItem>
        <ListItem className={classes.listItem}>
          <Link
          // <Button
            to="/login"
            // color="transparent"
            className={classes.navLink}
          >
            <AccountCircle className={classes.icons} /> Se connecter
            {/* <CloudDownload className={classes.icons} /> Se connecter */}
          {/* </Button> */}
          </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
          {/*<Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon />
            </IconButton>
          </Tooltip>*/}
          <Tooltip
            id="instagram-twitter"
            title="Follow us on twitter"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              href="https://twitter.com/CreativeTim?ref=creativetim"
              target="_blank"
              color="transparent"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-twitter"} />
            </Button>
          </Tooltip>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Tooltip
            id="instagram-facebook"
            title="Follow us on facebook"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="transparent"
              href="https://www.facebook.com/CreativeTim?ref=creativetim"
              target="_blank"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-facebook"} />
            </Button>
          </Tooltip>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Tooltip
            id="instagram-tooltip"
            title="Follow us on instagram"
            placement={window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="transparent"
              href="https://www.instagram.com/CreativeTimOfficial?ref=creativetim"
              target="_blank"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-instagram"} />
            </Button>
          </Tooltip>
        </ListItem>
      </List>
    );
  }
  