import React, { useState }       from 'react';
import { withKnobs }             from '@storybook/addon-knobs';
import { Description, Wrapper  } from '../../../';
import { RangeSlider }           from './range-slider.component';

export default {
    title:      'GEENEE-UI/RangeSlider',
    component:  RangeSlider,
    decorators: [ withKnobs ]
};

export const Playground = () => {
    const [ values, setValues ] = useState([ 50 ]);

    return (
        <Wrapper maxWidth="500px" frame="solid-shadow-xl" padding="xxl">
            <RangeSlider
                values={ values }
                max={ 100 }
                onChange={ ((val) => setValues(val)) }
            />
            <Description>{ values[ 0 ] }</Description>
        </Wrapper>
    );
};