import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Box } from "../Box";
import { Button, BUTTON_VARIANT } from "../Button";
import { Checkbox } from "../Checkbox";
import { ICON_TYPE } from "../Icon";
import { Markdown } from "../Markdown";
import { Paper } from "./Paper";

<Meta title="Components/Data/Paper" component={Paper} />

<ComponentHeading
  componentName="Paper"
  description=""
  sourcePath="src/components/Paper/Paper.tsx"
/>

export const markdownContent = `
# A.9.1.1 Access control policy
An access control policy shall be established, documented and reviewed based on business and information security requirements.
## [Access Control Review Policy](#)
The Security Officer shall assess and prioritize the risks posed by business processes requiring third-party access to Teapots's
information and information systems, consistent with the Risk Management Framework, to minimize, monitor, and measure the
likelihood and impact of unauthorized or inappropriate access. If the current risk analysis does not sufficiently reflect the
appropriate risks, the Security Officer shall update it. Compensating controls derived from the risk analysis must be implemented
prior to provisioning access.
`;

## Installation

```jsx
import { Paper } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Paper">
    <Paper>
      <Paper.Toolbar>
        <Box>
          <Checkbox className="inline-block mr-6" label="Hide mappings" />
          <Checkbox
            className="inline-block mr-6"
            label="Hide implementation"
            checked
          />
          <Checkbox className="inline-block mr-6" label="Hide empty domains" />
        </Box>
        <Button
          variant={BUTTON_VARIANT.SECONDARY}
          icon={ICON_TYPE.FILE_PDF}
          className="ml-auto"
        >
          Print to PDF
        </Button>
      </Paper.Toolbar>
      <Paper.Content>
        <Markdown>{markdownContent}</Markdown>
      </Paper.Content>
    </Paper>
  </Story>
</Canvas>

## API

Extends `React.HTMLProps<HTMLDivElement>`

<ArgsTable of={Paper} />

## Demos

### Without Toolbar

<Canvas withSource={SourceState.OPEN}>
  <Story name="Paper without toolbar">
    <Paper>
      <Paper.Content>
        This is the Paper component without a toolbar.
      </Paper.Content>
    </Paper>
  </Story>
</Canvas>