/** @jsx jsx */
import { Styled, jsx } from "theme-ui"
import PropTypes from "prop-types"
import { Link } from "../components"
import { useCartCount } from "../context/StoreContext"

const Header = ({ siteTitle }) => {
  const count = useCartCount()

  const countMarkup = (
    <span
      sx={{
        display: "inline-block",
        background: "white",
        color: "black",
        height: "20px",
        lineHeight: "20px",
        width: "20px",
        fontSize: "0.8em",
        borderRadius: "10px",
        ml: 2,
        top: "-2px",
        position: "relative",
        textAlign: "center",
      }}
    >
      {count}
    </span>
  )

  return (
    <Styled.div as="header">
      <div
        sx={{
          margin: `0 auto`,
          maxWidth: 960,
          py: 4,
          px: 3,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Styled.h1 sx={{ margin: 0, fontSize: 20, fontWeight: "bold" }}>
          <Link
            url="/"
            sx={{
              color: "black",
              letterSpacing: -0.5,
              textDecoration: `none`,
              paddingLeft: "20px",
              "&:hover": {
                textDecoration: "underline",
              },
              "&::before": {
                content: '"▼"',
                position: "absolute",
                marginLeft: "-20px",
              },
            }}
          >
            {siteTitle}
          </Link>
        </Styled.h1>
        <Link url="/cart" isButton>
          Cart
          {countMarkup}
        </Link>
      </div>
    </Styled.div>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export { Header }