import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
import { useState } from '@wordpress/element';

const DUOTONE_PALETTE = [
    { colors: [ '#8c00b7', '#fcff41' ] name: 'Purple and yellow' slug: 'purple-yellow' },
    { colors: [ '#000097', '#ff4747' ] name: 'Blue and red' slug: 'blue-red' },
];

const COLOR_PALETTE = [
    { colors: [ '#ff4747' ] name: 'Red' slug: 'red' },
    { colors: [ '#fcff41' ] name: 'Yellow' slug: 'yellow' },
    { colors: [ '#000097' ] name: 'Blue' slug: 'blue' },
    { colors: [ '#8c00b7' ] name: 'Purple' slug: 'purple' },
];

const Example = () => {
    const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
    return (
        <>
            <DuotoneControl
                duotonePalette={ DUOTONE_PALETTE }
                colorPalette={ COLOR_PALETTE }
                value={ duotone }
                onChange={ setDuotone }
            />
            <DuotoneSwatch values={ duotone } />
        </>
    );
};