import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as CarouselStories from './carousel.stories';

<Meta of={CarouselStories} />

<Title />
<Subtitle>A responsive content slider with support for mouse and touch navigation.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Grid Control** — Use `md:basis-1/2` or `lg:basis-1/3` on `CarouselItem` to control how many items are visible simultaneously.
> - **Navigation Layout** — `CarouselPrevious` and `CarouselNext` are positioned relative to the `Carousel` container.
> - **Options** — Pass Embla Carousel options (like `align`, `loop`) via the `opts` prop.