import React, { useState } from 'react'
import { Button, Modal, ConfigProvider } from 'react-icecream'

export default function Demo() {
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)

  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <div>
        <Button onClick={() => setVisible1(true)}>打开弹框</Button>
        <Modal
          title="基本示例"
          visible={visible1}
          maskClickable
          onOk={() => setVisible1(false)}
          onCancel={() => setVisible1(false)}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
      <div>
        <ConfigProvider mask={{ modal: { clickable: true } }}>
          <Button onClick={() => setVisible2(true)}>打开弹框</Button>
          <Modal
            title="基本示例"
            visible={visible2}
            onOk={() => setVisible2(false)}
            onCancel={() => setVisible2(false)}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </ConfigProvider>
      </div>
    </div>
  )
}