import { Story, Canvas, Meta, ArgsTable } from '@storybook/blocks'
import { useState } from 'react';
import DotsNav from '../DotsNav';
import * as DotsNavStories from './DotsNav.stories';

export const Default = () => {
    const [currentSlide, setCurrentSlide] = useState(0);
    return (
        <div style={{ background: '#eeeeee', padding: '12px' }}>
            <DotsNav
                nItems={12}
                currentIndex={currentSlide}
                goTo={setCurrentSlide}
            />
        </div>
    );
};

<Meta of={DotsNavStories} />

# DotsNav

<br />

## `DotsNavs` are used to allow navigation between different states.

<br />

### Default

<Canvas>
  <Story of={DotsNavStories.Default} />
</Canvas>

## Usage Example

```jsx
import React, { useState } from 'react';
import DotsNav from '@storybook/sfb-theme-components/src/atoms/dots-nav/DotsNav';

const Default = () => {
    const [currentSlide, setCurrentSlide] = useState(0);
    return (
        <div style={{ background: '#eeeeee', padding: '12px' }}>
            <DotsNav
                nItems={12}
                currentIndex={currentSlide}
                goTo={setCurrentSlide}
            />
        </div>
    );
};
```

## Props

<ArgsTable of={DotsNav} />
