import React, { useState } from 'react'
import { Button, Drawer, 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>
        <Drawer
          title="基本示例"
          visible={visible1}
          maskClickable={false}
          onOk={() => setVisible1(false)}
          onCancel={() => setVisible1(false)}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </div>
      <div>
        <ConfigProvider mask={{ drawer: { clickable: false } }}>
          <Button onClick={() => setVisible2(true)}>打开</Button>
          <Drawer
            title="基本示例"
            visible={visible2}
            onOk={() => setVisible2(false)}
            onCancel={() => setVisible2(false)}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Drawer>
        </ConfigProvider>
      </div>
    </div>
  )
}