import React from 'react'
import Link from 'gatsby-link'
import LogoSaburly from "../images/logo-saburly-white.svg"
import Button from './Button'

import "./Header.css"

let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"

const Header = () => (
  <header className="bg-saburly-default">
    <nav className="container mx-auto flex justify-between lg:p-6 p-4">
      <Link to="/">
        <img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
      </Link>

      <button className="menu_icon lg:invisible">
        <span className="menu_bar-top" />
        <span className="menu_bar-mid" />
        <span className="menu_bar-bot" />
      </button>

      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
        <ul className="text-sm">
          <Link to="/services">
            <li className={menuClasses}>What We Do</li>
          </Link>
          <Link to="/about">
            <li className={menuClasses}>TEAM</li>
          </Link>
          <Link to="/blog">
            <li className={menuClasses}>BLOG</li>
          </Link>

          <Button text="Contact" standard classes="rounded-full text-white" url="/contact" />
        </ul>
      </div>
    </nav>
  </header>
)

export default Header