import React from "react";
import { ClockIcon } from "@heroicons/react/solid";

function Header(props) {
  const { title, time } = props;
  return (
    <div className="screen-header">
      <div className="logo"></div>
      <span className="screen-title">{title}</span>
      <span className=" block text-white font-bold text-2xl	 leading-6	screen-time ">
        <div className=" inline-block">
          {time === undefined ? (
            <></>
          ) : (
            <ClockIcon className=" inline-block flex-0 w-8 h-8 -mt-1" />
          )}
        </div>

        {time}
      </span>
      <style jsx>{`
        .screen-header {
          height: 96px;
          background: url("/img/headerBg.png") center top no-repeat;
          background-size: cover;
          position: absolute;
          width: 100%;
          top: 0;
          text-align: center;
        }
        .screen-header .screen-title {
          text-align: center;
          font-size: 32px;
          line-height: 42px;
          font-weight: bold;
          background: linear-gradient(to right, #28a8ff, #3beaff, #28a8ff);
          background-clip: text;
          color: transparent;
          margin-top: 10px;
          display: inline-block;
        }
        @font-face {
          font-family: "UnidreamLED";
          src: url("/font/UnidreamLED.ttf");
        }
        .screen-header .screen-time {
          font-family: "黑体";
        }
        .screen-header .logo {
          position: absolute;
          height: 32px;
          width: 200px;
          background: url("/img/logo.png") center center no-repeat;
          background-size: 100%;
          top: 4px;
          left: 20px;
        }
      `}</style>
    </div>
  );
}

export default Header;