import React from "react";
import { Box, IconButton, Link } from "@material-ui/core";
import Icon from "@mdi/react";

//icons
import {
  mdiFacebook as FacebookIcon,
  mdiTwitter as TwitterIcon,
  mdiGithub as GithubIcon
} from "@mdi/js";

// styles
import useStyles from "./styles";

const ContentFooter = () => {
  var classes = useStyles();

  return (
    <Box
      mt={5}
      width={"100%"}
      display={"flex"}
      alignItems={"center"}
      justifyContent="space-between"
    >
      <div>
        <Link
          color={"primary"}
          href={"https://lab.code-rove.com/heimdall"}
          target={"_blank"}
          className={classes.link}
        >
          Toodle
        </Link>
        <Link
          color={"primary"}
          href={"https://lab.code-rove.com/heimdall"}
          target={"_blank"}
          className={classes.link}
        >
          About Us
        </Link>
        <Link
          color={"primary"}
          href={"https://lab.code-rove.com/heimdall"}
          target={"_blank"}
          className={classes.link}
        >
          Blog
        </Link>
      </div>
      <div>
        <Link href={"https://www.facebook.com"} target={"_blank"}>
          <IconButton aria-label="facebook">
            <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
          </IconButton>
        </Link>
        <Link href={"https://twitter.com"} target={"_blank"}>
          <IconButton aria-label="twitter">
            <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
          </IconButton>
        </Link>
        <Link href={"https://lab.code-rove.com/gitea/"} target={"_blank"}>
          <IconButton aria-label="github" style={{ marginRight: -12 }}>
            <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
          </IconButton>
        </Link>
      </div>
    </Box>
  );
};

export default ContentFooter;
