import React, { useContext, useState, useEffect } from 'react';
import './style/notice.less';

interface NoticeProps {}

const Notice: React.FC<NoticeProps> = () => {
  const [visible, setVisible] = useState(true);

  function onClose() {
    setVisible(false);
  }

  if (visible) {
    return (
      <div className="__dumi-default-layout-notice">
        <div
          style={{ fontSize: '14px', fontWeight: 'bold', paddingTop: '4px' }}
        >
          需要帮助？
          <div style={{ fontSize: '12px', color: '#454d64' }}>
            建议先查阅 <a href="/guide/faq/">FAQ</a>
          </div>
        </div>
        <div className="__dumi-default-layout-notice-qr" />
        <div>扫码回复"brew"进群</div>
        <span className="__dumi-default-layout-notice-close" onClick={onClose}>
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="close"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
          </svg>
        </span>
      </div>
    );
  } else {
    return null;
  }
};

export default Notice;