import { Story, Canvas, ArgsTable, Meta } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Paragraph } from "./Paragraph";

<Meta title="Components/Typography/Paragraph" component={Paragraph} />

<ComponentHeading
  componentName="Paragraph"
  description="Render text with predefined leading and margin"
  sourcePath="src/components/Heading/Heading.tsx"
/>

Use paragraph when you want to show large blocks of text.

## Installation

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

## Basic usage

<Canvas>
  <Story name="Paragraph">
    <Paragraph>This is the Paragraph component</Paragraph>
  </Story>
</Canvas>

## API

<ArgsTable of={Paragraph} />

## Demos

### Changing styles

Paragraph renders text with the following defaults: `["text-body", "text-gray-700", "leading-normal", "my-6"]`.

These can be overridden as needed.

<Canvas>
  <Story name="Paragraph changing styles">
    <Paragraph className="text-h2 text-blue-400 my-2">
      This is the Paragraph component with custom styles
    </Paragraph>
  </Story>
</Canvas>