import { Modal, Button } from 'antd';
import React, { useState } from 'react';
import { FormattedMessage } from 'umi';

export const BrowserWarningModal: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(true);

  const handleOk = () => {
    setIsModalVisible(false);
  };

  return (
    <Modal
      title={
        <FormattedMessage
          id={'base.browser.low.version.tips.title'}
          defaultMessage="Browser Version Warning"
        />
      }
      open={isModalVisible}
      onOk={handleOk}
      onCancel={handleOk}
      footer={[
        <Button key="ok" type="primary" onClick={handleOk}>
          <FormattedMessage id={'base.browser.low.version.tips.sure'} defaultMessage="OK" />
        </Button>,
      ]}
    >
      <p>
        <FormattedMessage
          id={'base.browser.low.version.tips'}
          defaultMessage="Your browser version is too low and may not display page features correctly. We recommend you upgrade your browser."
        />
      </p>
    </Modal>
  );
};