import {FunctionComponent, Fragment} from 'react';

interface Props {
  showMenu?: boolean;
}

const Header: FunctionComponent<Props> = ({ showMenu = true }) => {
  return (
    <Fragment>
      <header>
        <div className="logo">
          <div className="ring">
            <div className="internal-ring">
              <hr />
              <span>RAA</span>
              <hr />
            </div>
          </div>
        </div>
        <div className="texts">
          <h1>Rômulo Alves</h1>
          <h2>Software Engineer</h2>
        </div>
      </header>
      {showMenu && (
        <nav>
          <ul>
            <li><a href="#">About me</a></li>
            <li><a href="#">Resumé</a></li>
          </ul>
        </nav>
      )}
      <style jsx>{`
        header,
        .logo,
        .ring,
        .internal-ring,
        .texts {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .texts {
          align-items: baseline;
          flex-direction: column;
          margin-left: 45px;
        }

        header {
          color: #fff;
          height: 300px;
        }

        header,
        .ring {
          background: rgb(110, 110, 110);
        }

        .logo,
        .internal-ring {
          background: #fff;
        }

        .logo,
        .ring,
        .internal-ring {
          border-radius: 50%;
        }

        .logo {
          height: 150px;
          margin-left: -14%;
          width: 150px;
        }

        .ring {
          height: 140px;
          width: 140px;
        }
        .internal-ring {
          flex-direction: column;
          height: 130px;
          width: 130px;
        }

        span {
          color: rgb(110, 110, 110);
          font-size: 40px;
        }

        hr {
          background: rgb(110, 110, 110);
          border: none;
          border-radius: 6px;
          height: 6px;
          margin: 10px;
          padding: 0;
          width: 26px;
        }

        h1,
        h2 {
          margin: 0;
        }

        h1 {
          font-size: 52px;
        }

        h2 {
          font-size: 20px;
          margin-left: 3px;
          text-transform: uppercase;
        }

        ul {
          background: rgb(110, 110, 110);
          display: flex;
          justify-content: center;
          list-style: none;
          margin: 0;
          padding: 0;
        }

        nav a {
          color: #fff;
          display: inline-block;
          letter-spacing: 1px;
          min-width: 100px;
          padding: 10px;
          text-align: center;
          transition: background .2s, color .2s;
        }

        nav a:hover {
          background: #fff;
          color: rgb(110, 110, 110);
        }

        @media (max-width: 740px) {
          header {
            flex-direction: column;
          }
          .logo {
            margin-left: 0;
          }
          .texts {
            margin-left: 0;
            margin-top: 20px;
          }

          h1 {
            font-size: 38px;
          }
          h2 {
            font-size: 18px;
          }
        }
      `}</style>
    </Fragment>
  );
};

export default Header;