import React from 'react'
import { Link } from 'systems/Core/Link'
import css from 'styled-jsx/css'

export const Header = () => {
  return (
    <header className="Root">
      <img src="/logo.svg" width={100} />
      <div className="MainMenu">
        <ul className="MenuList">
          <li>
            <Link className={linkStyles.className} href="/">
              Home
            </Link>
          </li>
          <li>
            <Link className={linkStyles.className} href="/blog">
              Blog
            </Link>
          </li>
          <li>
            <Link className={linkStyles.className} href="/contact">
              Contact
            </Link>
          </li>
        </ul>
      </div>
      <div className="SocialMedia">
        <span>Follow us</span>
        <ul className="MenuList">
          <li>
            <a href="#">
              <img src="/icons/instagram.svg" width={30} alt="Instagram" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/icons/twitter.svg" width={30} alt="Twitter" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/icons/github.svg" width={30} alt="Github" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/icons/facebook.svg" width={30} alt="Facebook" />
            </a>
          </li>
        </ul>
      </div>
      <ul className="Flags MenuList">
        <li>
          <a href="#">
            <img src="/flags/eua.svg" width={30} alt="English" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="/flags/br.svg" width={30} alt="Portuguese" />
          </a>
        </li>
      </ul>
      <style jsx>{styles}</style>
      {linkStyles.styles}
    </header>
  )
}

const styles = css`
  .Root {
    @apply px-10 py-8 flex items-center text-white shadow-sm border-b border-border;
  }
  .MenuList {
    @apply grid grid-flow-col gap-3 items-center;
  }
  .MainMenu {
    @apply flex-1;

    .MenuList {
      @apply pl-12;
      grid-auto-columns: min-content;
    }
  }
  .SocialMedia {
    @apply flex items-center;

    span {
      @apply pr-4 text-gray-500;
    }
    a img {
      @apply opacity-75;
    }
    a:hover img {
      @apply opacity-100;
    }
  }
  .Flags {
    @apply pl-12;
  }
`

const linkStyles = css.resolve`
  a {
    @apply py-2 px-4;
  }
  a,
  a:hover {
    @apply no-underline text-lg text-gray-500 cursor-pointer rounded-md;
  }
  a:hover,
  a.active {
    @apply text-white;
    background: theme('colors.header.menuItemBg');
  }
`