import Link from 'next/link'
import theme from '../../styles/theme'

const Logo = () => (
  <h1 className='logo'>
    <Link href='/'>
      <a>
        <span className='logo-circle'>u</span>
        <span className='logo-text'>fit</span>
      </a>
    </Link>
    <style jsx>
      {`
        .logo {
          margin: 10px auto;
        }
        .logo span {
          padding-top: 0.3em;
          font-size: 40px;
        }
        .logo-circle {
          position: relative;
          display: inline-block;
          text-align: right;
          width: 1.55em;
          height: 1.55em;
          background-color: ${theme.colors.logoRed};
          border-radius: 50%;
          font-weight: 900;
          padding-right: 0.1em;
        }
        .logo-circle::before {
          position: absolute;
          content: '';
          display: block;
          width: 0.2em;
          height: 0.2em;
          border-radius: 50%;
          background-color: white;
          right: 50%;
          bottom: 55%;
        }

        a {
          text-decoration: none;
          color: white;
        }

        .logo .logo-text {
          color: ${theme.colors.logoBlack};
          margin-left: 0em;
        }
      `}
    </style>
  </h1>
)

export default Logo