// Packages
import React from 'react';
import css from 'next/css';

// Components
import Anchor from '../common/Anchor';

export default () => (
  <nav className={navbarStyle}>
    <ul className={listStyle}>
      <li className={`${listItemStyle} ${noMarginLeft}`}>
        <Anchor href="https://twitter.com/romuloalves" title="twitter">
          Twitter
        </Anchor>
      </li>
      <li className={listItemStyle}>
        <Anchor href="https://github.com/romuloalves" title="github">
          GitHub
        </Anchor>
      </li>
      <li className={listItemStyle}>
        <Anchor href="mailto:contact@romuloalv.es" title="e-mail">
          E-mail
        </Anchor>
      </li>
      <li className={`${listItemStyle} ${noMarginRight}`}>
        <Anchor href="https://medium.com/@romuloalves" title="medium">
          Medium
        </Anchor>
      </li>
    </ul>
  </nav>
);

const navbarStyle = css({
  margin: '0 auto',
  padding: '30px 0',
  width: '420px',
  '@media (max-width: 500px)': {
    width: '300px'
  },
  '@media (max-width: 300px)': {
    width: 'auto'
  }
});

const listStyle = css({
  overflow: 'auto'
});

const listItemStyle = css({
  float: 'left',
  listStyleType: 'none',
  margin: '0 30px',
  textAlign: 'center',
  width: '60px',
  '@media (max-width: 500px)': {
    margin: '0 10px'
  },
  '@media (max-width: 300px)': {
    margin: '15px 0',
    width: '100%'
  }
});

const noMarginRight = css({
  marginRight: '0'
});

const noMarginLeft = css({
  marginLeft: '0'
});