import React from 'react';

function DateItem(props) {
  const { text } = props;
  return (
    <span className='screen-dateItem'>
      <span className="screen-dateItem-line left"></span>
      <span className={text !== '-' && 'screen-dateItem-text'}>{text}</span>
      <span className="screen-dateItem-line right"></span>
      <style jsx>{`
        @font-face {
          font-family: 'UnidreamLED';
          src: url('/font/UnidreamLED.ttf');
        }
        .screen-dateItem{
          font-family: 'UnidreamLED';
          width: 40px;
          display: inline-block;
          position: relative;
          margin-left: -1px;
        }
        .screen-dateItem-line{
          position: absolute;
          width: 1px;
          height: 100%;
        }
        .screen-dateItem-line.left{
          left: 0;
          top:0;
        }
        .screen-dateItem-line.right{
          right: 0;
          bottom:0;
        }
        .screen-dateItem-line::after,
        .screen-dateItem-line::before{
          content: '';
          display: block;
          width: 1px;
          height: 30%;
          background: #28A3FF;
          position: absolute;
        }
        .screen-dateItem-line::before{
          top: 0;
        }
        .screen-dateItem-line::after{
          bottom: 0;
        }
        .screen-dateItem-text{
          display: inline-block;
          background: linear-gradient(to bottom, #020E2E, #0072EE, #020E2E);
          padding: 0 8px;
        }
      `}</style>
    </span>
  );
}

export default React.memo(DateItem);