import React, { Component } from 'react'
import Link, { withPrefix } from 'gatsby-link'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
import Button from './Button'

import './Header.css'

let menuClasses =
  'no-underline mt-4 lg:inline-block opacity-80 text-black font-medium lg:mt-0 hover:opacity-100 uppercase mr-4'

class Header extends Component {
  render() {
    return (
      <header className="bg-saburly-light-header">
        <nav className="container border-saburly-header mx-auto flex items-center justify-between lg:p-6 p-4">
          <Link to="/">
            <div className="max-w-xs mr-8">
              <img src={LogoSaburly} className="w-full" alt="Saburly Logo" />
            </div>
          </Link>

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

          <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="list-reset font- text-sm">
              <Link to="/services">
                <li className={menuClasses}>Services</li>
              </Link>
              <Link to="/about">
                <li className={menuClasses}>About Us</li>
              </Link>
              <Link to="/blog">
                <li className={menuClasses}>Blog</li>
              </Link>

              <Button
                text="Contact"
                standard
                classes="rounded-full font-medium text-black hover:shadow"
                url="/contact"
              />
            </ul>
          </div>
        </nav>
      </header>
    )
  }
}

export default Header