import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components';
import Emoji from './Emoji';

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

const Spacer = () => (
  <span style={{marginLeft: 8, marginRight: 8}}>-</span>
);

const StyledHeaderArea = styled.div`
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 15px;
`;
const StyledAvatar = styled.div`
  height: 70px;
  width: 70px;
  margin-right: 10px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  background-image: url(${Will});
`;
const StyledTitle = styled.h1`
  a {
    text-decoration: none;
  }
  margin-bottom: 6px;
  font-size: 1.3rem;
  font-variation-settings: "MONO" 0.5, "CASL" 0.5, "wght" 400, "slnt" -7, "CRSV" 1; 
`;
const StyledSocialLink = styled.a`
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 4px;
  border-radius: 5px;
  background: linen;
  display: inline-block;
`;

const Header = () => (
  <div style={{marginBottom: '1.45rem'}}>
    <div style={{textAlign: 'left', margin: '0 auto', maxWidth: 960, padding: '1.45rem 1.0875rem'}}>
      <StyledHeaderArea>
        <Link to='/'><StyledAvatar /></Link>
        <div>
          <StyledTitle><Link to='/'>Will Webberley</Link></StyledTitle>
          <StyledSocialLink rel="me" href="https://fosstodon.org/@wilw"><Emoji e='📣' /> mastodon</StyledSocialLink>
          <StyledSocialLink href="https://pixelfed.social/@wilw" target="_blank" rel="noopener noreferrer"><Emoji e='🖼️' /> pixelfed</StyledSocialLink>
          <StyledSocialLink href="https://git.wilw.dev/explore/repos" target="_blank" rel="noopener noreferrer"><Emoji e='💻' /> code</StyledSocialLink>
        </div>
      </StyledHeaderArea>
      <p style={{fontSize: 20}}>
        <Link to='/' activeClassName='active-link'>about</Link><Spacer />
        <Link to='/blog' activeClassName='active-link'>blog</Link><Spacer />
        <Link to='/notes' activeClassName='active-link'>notes</Link><Spacer />
        <Link to='/projects' activeClassName='active-link'>projects</Link><Spacer />
        <Link to='/research' activeClassName='active-link'>research</Link>
      </p>
    </div>
  </div>
)

export default Header
