import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faInfo } from '@fortawesome/free-solid-svg-icons'
import { faGit } from '@fortawesome/free-brands-svg-icons';

import Will from '../images/will.png';

const StyledFooter = styled.div`
  border-top: 2px solid linen;
  padding: 10px 15px 10px 15px;
  margin-top: 50px;
  display: flex;
  align-items: center;
`;
const StyledAvatar = styled.div`
  height: 30px;
  width: 30px;
  margin-right: 10px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  background-image: url(${Will});
`;
const StyledCopyright = styled.span`
  font-size: 13px;
  color: rgb(100,100,100);
`;
const StyledSourceLink = styled.a`
  margin-left: 10px;
  font-size: 13px;
`;
const StyledNavLink = styled(Link)`
  margin-left: 10px;
  font-size: 13px;
`;

const Footer = () => (
  <StyledFooter>
    <StyledAvatar />
    <StyledCopyright>&copy; Will Webberley {(new Date()).getFullYear()}</StyledCopyright>
    <StyledSourceLink href="https://git.wilw.dev/wilw/wilw.dev" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGit} /> View site source</StyledSourceLink>
    <StyledNavLink to='/this'><FontAwesomeIcon icon={faInfo} /> About this site &amp; privacy</StyledNavLink>
  </StyledFooter>
)

export default Footer;
