// @flow
import * as React from 'react';
import styled from 'styled-components';

type Props = {|
  className?: string,
  gridLeft?: React.Node,
  gridCenter?: React.Node,
  gridRight?: React.Node,
|};

const StyledHeader: React.ComponentType<{}> = styled.div`
  border-bottom: 1px solid var(--hl-md);
  padding: var(--padding-md);
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'header_left header_center header_right';
  .header_left {
    grid-area: header_left;
    text-align: left;
    display: flex;
    align-items: center;
  }
  .header_center {
    grid-area: header_center;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .header_right {
    grid-area: header_right;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
`;

class Header extends React.PureComponent<Props> {
  render() {
    const { className, gridLeft, gridCenter, gridRight } = this.props;
    return (
      <StyledHeader className={className}>
        <div className="header_left">{gridLeft}</div>
        <div className="header_center">{gridCenter}</div>
        <div className="header_right">{gridRight}</div>
      </StyledHeader>
    );
  }
}

export default Header;