import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Modal from './';
import ModalHeader from './ModalHeader';
import ModalButton from './ModalButton';
import ModalButtonGroup from './ModalButtonGroup';
import { ModalDemo } from './Modal.stories';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';
import * as ModalStories from './Modal.stories.tsx';

<Meta of={ModalStories} />

# Modal

The Modal component renders as an overlay over the rest of the application. You can click outside of the modal to close the modal. While the modal is open, it will trap the user's focus.

The modal itself is composed of other components including ModalHeader, ModalBody, ModalButtonGroup, and ModalButton. Other elements can also be included in the modal.

## Importing

```javascript
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalButtonGroup,
  ModalButton,
} from 'amazon-chime-sdk-component-library-react';
```

## Example

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <ModalDemo />
  </Canvas>
</ThemeProvider>

```jsx
{
  isOpen && (
    <Modal size="md" onClose={() => setIsOpen(false)} rootId="modal-root">
      <ModalHeader title="Modal header" />
      <ModalBody>
        <p>This is information presented in a modal</p>
        <ModalButtonGroup
          primaryButtons={[
            <ModalButton onClick={() => {}} label="submit" variant="primary" />,
          ]}
          secondaryButtons={[
            <ModalButton
              onClick={() => {}}
              label="More info"
              variant="secondary"
            />,
          ]}
        />
      </ModalBody>
    </Modal>
  );
}
```

## Props

### Modal

<ArgTypes of={Modal} />

### ModalHeader

<ArgTypes of={ModalHeader} />

### ModalButtonGroup

<ArgTypes of={ModalButtonGroup} />

### ModalButton

<ArgTypes of={ModalButton} />