import React from 'react';
import { Link } from 'react-router-dom';

const AlertBar = ({ exp, handleClose }) => {
  return (
    <div
      style={{
        height: 44,
        background: '#FFE7E0',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        fontFamily: 'PingFangSC-Regular'
      }}>
      <i
        onClick={handleClose}
        className="icon iconfont icon-btn_close"
        style={{
          position: 'absolute',
          color: '#666666',
          right: 20,
          cursor: 'pointer'
        }}
      />
      <div
        style={{
          color: '#333333',

          fontSize: 12,
          display: 'flex',
          alignItems: 'center'
        }}>
        <div
          style={{
            width: 14,
            height: 14,
            borderRadius: '50%',
            background: '#EF5350',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: '#FFFFFF',
            marginRight: 4
          }}>
          !
        </div>
        <div>
          {`您的EasyV产品使用权限将于 ${exp} 到期，请尽快升级账户以保障产品正常使用，`}
          <Link
            to="active"
            style={{
              color: '#2491F7'
            }}>
            立即升级
          </Link>
        </div>
      </div>
    </div>
  );
};

export default AlertBar;
