/** @jsx jsx */
import { css, jsx } from "@emotion/core";
// import * as React from "react";

const ClassroomHeaderAtom = (props: any) => (
  <header
    // className={cx(
    //   "fl w-100 flex justify-between align-center",
    //   css`
    //     background: #1c2229;
    //     color: white;
    //     padding: 15px 22px;
    //     position: fixed;
    //     top: 0;
    //     left: 0;
    //     z-index: 995;
    //     height: 68px;
    //     @media only screen and (max-width: 640px) {
    //       height: 48px;
    //     }
    //   `,
    // )}
    className={props.className}
    css={[css`
      background: #1c2229;
      color: white;
      padding: 15px 22px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 995;
      height: 68px;
      @media only screen and (max-width: 640px) {
        height: 48px;
      }
    `, "fl w-100 flex justify-between align-center", props.css]}
  >
    {props.children}
  </header>
);

ClassroomHeaderAtom.displayName = "ClassroomHeaderAtom";

export { ClassroomHeaderAtom };