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

<Meta of={AccordionStories} />

<Title>Accordion</Title>
<Subtitle>
  A vertically stacked set of interactive headings that each reveal a section of
  content.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/accordion',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/accordion',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

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

## Subcomponents

- `Accordion`: The root component that wraps the accordion items.
- `AccordionItem`: A single item within the accordion, containing a trigger and content.
- `AccordionTrigger`: The button that toggles the accordion item's visibility.
- `AccordionContent`: The collapsible content area within an accordion item.

## Usage

### Import

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@chainlink/blocks'
```

### Example

```tsx
export function MyAccordion() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Accordion Item 1</AccordionTrigger>
        <AccordionContent>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Accordion Item 2</AccordionTrigger>
        <AccordionContent>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

## Examples

### Multiple Open at Once

Set the `type` prop to `multiple` to allow multiple items to be open simultaneously.

<Canvas of={AccordionStories.MultipleOpenAtOnce} sourceState="shown" />

### Accordion with Cards

The Accordion can be composed with other components, like `Card`, for more complex layouts.

<Canvas of={AccordionStories.CardsAccordion} sourceState="shown" />