import { createBoard } from '@wixc3/react-board';
import { useState } from 'react';
import { Slider } from '@blueprintjs/core';
// board cover
import cover from '../../../../assets/form-controls/slider.svg';

export default createBoard({
    name: 'Slider',
    Board: () => {
        const [value, setValue] = useState(0.4);
        const renderLabel = (val: number) => `${Math.round(val * 100)}%`;

        return (
            <Slider
                min={0}
                max={1}
                stepSize={0.25}
                labelStepSize={0.5}
                onChange={setValue}
                labelRenderer={renderLabel}
                value={value}
                vertical={false}
            />
        );
    },
    tags: ['slider', 'form', 'controls'],
    cover,
});
