import React, { useEffect, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '../Button';
import { CloseBtn } from '../CloseBtn';
import { Modal } from './index';

storiesOf('Components/Modal', module).add('default', () => {
   const [show, setShow] = useState(true);

   return (
      <>
         <Button variant="light" onClick={() => setShow(true)}>
            Open modal
         </Button>
         <Modal show={show} onRequestClose={() => setShow(false)}>
            <Modal.Body className="p-4">
               <div className="float-right">
                  <CloseBtn onClick={() => setShow(false)} size={16} />
               </div>
               <div className="text-center">
                  <div className="p-4">Modal example with two buttons</div>
                  <Button>Action</Button>
                  &nbsp;&nbsp;
                  <Button variant="light">Cancel</Button>
               </div>
            </Modal.Body>
         </Modal>
      </>
   );
});
