import {
  Canvas,
  Meta,
  Title,
  Subtitle,
  Description,
  Primary,
  Stories,
  ArgTypes,
  Controls,
  Story,
} from "@storybook/blocks";

import * as ModalStories from "./Modal.stories";

<Meta of={ModalStories} />

<Title />

Modals are used to display content on top of other content. They are often used to display alerts, notifications, or to prompt users to take an action.

> NOTE: The controls in this page are not working currently. Go to a specific story to see the controls in action.

<Description />
<Primary />
<Controls />

## Composing Modals

The presentation of Modals is meant to be composable. Elements provides a set of utility component to help you build your own Modals such as
`Modal.Header`, `Modal.Body`, and `Modal.Footer`.

<Canvas of={ModalStories.Primary} />

By default:

- `Modal.Title` fills the entire width of the Modal
- `Modal.Body` adds padding to the top and bottom of the content
- `Modal.Footer` content is right-aligned

Note that these components are optional and you can use them as you see fit.

<Canvas of={ModalStories.WithCustomContent} />

## Managing Modal State

When using the Modal by itself, you can manage it's state using the `isOpen` prop. This prop is a boolean that determines if the Modal is open or not.

You're also able to employ the [OverlayTrigger](?path=/docs/overlays-overlaytrigger--overview) component to manage the state of the Modal.
This component is a wrapper that manages the state of the Modal for you. Make note thatn when you do this, the children of the modal should
be a function that takes a `close` function as an argument. Call this function to close the Modal.

<Canvas of={ModalStories.WithOverlayTrigger} />