/**
 * External dependencies
 */
import { useState } from '@wordpress/element';

/**
 * Internal dependencies
 */
import PriceSlider from '../';

export default {
	title: 'WooCommerce Blocks/@base-components/PriceSlider',
	component: PriceSlider,
};

export const Default = () => {
	// PriceSlider expects client to update min & max price, i.e. is a controlled component
	const [ min, setMin ] = useState( 1000 );
	const [ max, setMax ] = useState( 5000 );
	return (
		<PriceSlider
			minPrice={ min }
			maxPrice={ max }
			onChange={ ( values ) => {
				setMin( values[ 0 ] );
				setMax( values[ 1 ] );
			} }
			minConstraint={ 1000 }
			maxConstraint={ 5000 }
			step={ 250 }
			currency={ {
				code: 'nzd',
				symbol: '$',
				thousandSeparator: ' ',
				decimalSeparator: '.',
				minorUnit: 2,
				prefix: '$',
				suffix: '',
			} }
		/>
	);
};