import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs/blocks'
import { useState } from 'react';
import DotsNav from '../DotsNav';

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

<Meta title="Atoms/Dots Nav" component={DotsNav} />

# DotsNav
<br />

## `DotsNavs` are used to allow navigation between different states.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Default />
    </Story>
</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} />
