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

<Meta of={SeparatorStories} />

<Title>Separator</Title>
<Subtitle>
  A visual separator component for dividing content sections. Built on Radix UI
  Separator primitive.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/separator',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/separator',
    },
  ]}
/>

<LifecycleTag variant="Stable" />

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

## Import

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

## Usage

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

export const MyComponent = () => {
  return (
    <div className="space-y-4">
      <div>
        <Typography variant="h4">Section 1</Typography>
        <Typography variant="body-s">Content for the first section.</Typography>
      </div>
      <Separator />
      <div>
        <Typography variant="h4">Section 2</Typography>
        <Typography variant="body-s">
          Content for the second section.
        </Typography>
      </div>
    </div>
  )
}
```

## Rendered Element

The `Separator` component renders a `<div>` element with appropriate ARIA attributes for accessibility. The visual appearance is controlled through CSS classes that create a thin line.

## Examples

### Horizontal

A horizontal separator for dividing content sections.

<Canvas of={SeparatorStories.Horizontal} sourceState="shown" />

### Vertical

A vertical separator for navigation or sidebar layouts.

> **Note**: For vertical separators, the parent component needs to have a specified height or the separator itself needs a height class (e.g., `h-8`) to be visible.

<Canvas of={SeparatorStories.Vertical} sourceState="shown" />

### Custom Styling

Apply custom styling to change the appearance of the separator.

<Canvas of={SeparatorStories.CustomStyling} sourceState="shown" />

### In Content

Using separators to divide content sections in a layout.

<Canvas of={SeparatorStories.InContent} sourceState="shown" />

### Navigation Example

Using vertical separators in navigation components.

<Canvas of={SeparatorStories.NavigationExample} sourceState="shown" />