import React, { useState } from 'react'

import { Button, Modal, useModalFooterCtx } from 'react-icecream'

function MyFooter() {
  const { onOk } = useModalFooterCtx()
  return (
    <div style={{ width: '100%', paddingTop: '12px', borderTop: '1px solid #E5E5E5', textAlign: 'left' }}>
      <Button type="primary" onClick={onOk}>好的，我知道了</Button>
    </div>
  )
}

export default function Demo() {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>打开弹框</Button>
      <Modal
        visible={visible}
        title="自定义 footer"
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        footer={<MyFooter />}
      >
        这是个自定义 <code>Footer</code> 组件的弹框
      </Modal>
    </>
  )
}