import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as SectionStories from './Section.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={SectionStories} />

<Title>Section</Title>
<Subtitle>
  A layout component used to create distinct sections of content on a page, with
  support for different visual variants, widths, and border styles.
</Subtitle>
<LifecycleTag variant="In Development" />

<Canvas of={SectionStories.Default} sourceState="shown">
  <Controls />
</Canvas>

## Usage

### Import

```tsx
import { Section } from '@chainlink/blocks'
```

### Example

```tsx
import { Section, Typography } from '@chainlink/blocks'

export function MyPageLayout() {
  return (
    <Section>
      <Typography variant="h2">This is a Section</Typography>
      <Typography>It provides a container for your page content.</Typography>
    </Section>
  )
}
```

## Examples

The `Section` component is highly configurable. Use the `variant`, `width`, and `border` props to create different layouts and visual styles. The interactive story below demonstrates all available props.

<Canvas of={SectionStories.Interactive} sourceState="shown" />

### Alternative Variant

The `alt` variant provides a different background color to create visual separation between sections.

<Canvas of={SectionStories.AltVariant} sourceState="shown" />

### Width Options

Control the width of the section's content with the `width` prop.

<Canvas of={SectionStories.FluidWidth} sourceState="shown" />
<Canvas of={SectionStories.NarrowWidth} sourceState="shown" />

### With Border

Add a top border to a section to create a clear visual divider.

<Canvas of={SectionStories.WithBorder} sourceState="shown" />

### Composing Multiple Sections

Combine multiple sections with different variants to build complex page layouts.

<Canvas of={SectionStories.MultipleSections} sourceState="shown" />