import React from 'react';
import styled from 'styled-components';

const StyledAbout = styled.div`
  color: ${props => props.theme.text};

  a {
    border-bottom: 1px solid ${props => props.theme.CRIMSON};
    color: ${props => props.theme.CRIMSON};
    text-decoration: none;

    &:hover {
      border-bottom: 1px solid transparent;
    }
  }
`;

const Header = styled.h3`
  color: ${props => props.theme.header};
  margin-top: 2rem;
`;

const About = () => (
  <StyledAbout>
    <Header>The Game</Header>
    <p>
      Design Patterns - get familiar with the design patterns implemented in JavaScript, test
      yourself (or someone else) or simply for fun. Enjoy!
    </p>

    <Header>References</Header>
    <p>
      All the code samples are taken from this{' '}
      <cite>
        <a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
          awesome code compilation
        </a>{' '}
        by Felipe Beline
      </cite>
      .
    </p>
    <p>
      If you want a deep dive into the subject I can't recommend enough{' '}
      <cite>
        <a href="//addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank">
          Learning JavaScript Design Patterns
        </a>{' '}
        by Addy Osmani
      </cite>
      .
    </p>
  </StyledAbout>
);

export default About;