text: import { Link, navigate } from "gatsby"
  import PropTypes from "prop-types"
  import React, { useContext } from "react"
  import { FirebaseContext } from './firebase';
  import styled from "styled-components";
  
  const LogoutLink = styled.span`
    cursor: pointer;
    color: white;
    &:hover{
      text-decoration: underline;
    }
  `;
  
  const HeaderWrapper = styled.header`
    background: rebeccapurple;
    margin-bottom: 1.45rem;
  `;
  
  const HeaderContent = styled.div`
    margin: 0 auto;
    max-width: 960px;
    padding: 1.45rem 1.0875rem;
    display: flex;
  
    >h1{
      margin: 0;
      flex-grow: 1;
      >a{
        color: white;
        text-decoration: none;
      }
    }
  
    >div{
      margin: auto 0;
    }
  `;
  
  const LoginLink = styled.div`
    margin: auto 0;
    a{
      color: white;
    }
  `;
  const AdminLink = styled.span`
    margin: auto 0;
    a{
      color:white;
    }
  `;
  const UserInfo = styled.div`
    text-align: right;
    color:white;
  `;
  
  const Header = ({ siteTitle }) => {
    const { firebase, user } = useContext(FirebaseContext);
    console.log(user);
  
    function handleLogoutClick() {
      firebase.logout().then(() => navigate('login'));
    }
  
    const Divider = styled.span`
      margin: 0 8px;
      padding-right: 1px;
      background: #ddd;
    `;
  
    return (
      <HeaderWrapper>
        <HeaderContent>
          <h1>
            <Link
              to="/">
              {siteTitle}
            </Link>
          </h1>
          <UserInfo> {!!user && !!user.email &&
            <div>
              Hello, {user.username || user.email}
              <div>
                {!!user.isAdmin &&
                  <>
                    <AdminLink><Link to="/add-author">Add Author</Link></AdminLink>
                    <Divider />
                    <AdminLink><Link to="/add-book">Add Book</Link></AdminLink>
                    <Divider />
                  </>
                }
                <LogoutLink onClick={handleLogoutClick}>
                  Logout
                </LogoutLink>
              </div>
            </div>
          }
            {(!user || !user.email) &&
              <LoginLink>
                <Link to="/login">
                  Login
              </Link>
                <Divider />
                <Link to="/register">Register</Link>
              </LoginLink>
            }
          </UserInfo>
        </HeaderContent>
      </HeaderWrapper>
    )
  }
  
  Header.propTypes = {
    siteTitle: PropTypes.string,
  }
  
  Header.defaultProps = {
    siteTitle: ``,
  }
  
  export default Header
  