import React, { useState } from 'react';
import { Modal } from '.';
import { Button } from '../Button';
import { Header } from '../Modal/Header';
import { Body } from '../Modal/Body';
import { Footer } from './Footer';

export default {
  title: 'Modal',
  component: Modal,
};

export const Default = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        isOpen={open}
        onClose={() => {
          setOpen(false);
          alert('onClose event fired');
        }}
      >
        <Header>Modal Header</Header>
        <Body>
          Modal Body...
          <br />
          Please note that you need to style the content of the modal. It just
          has basic styling.
        </Body>
        <Footer>Modal Footer(where buttons usually go)</Footer>
      </Modal>
    </>
  );
};
