import { createBoard } from '@wixc3/react-board';
import { ResponsiveFunnel } from '@nivo/funnel';
import cover from './cover.png';

const data = [
    {
        id: 'step_sent',
        value: 62972,
        label: 'Sent',
    },
    {
        id: 'step_viewed',
        value: 59817,
        label: 'Viewed',
    },
    {
        id: 'step_clicked',
        value: 46978,
        label: 'Clicked',
    },
    {
        id: 'step_add_to_card',
        value: 40587,
        label: 'Add To Card',
    },
    {
        id: 'step_purchased',
        value: 25449,
        label: 'Purchased',
    },
];

export default createBoard({
    name: 'Funnel',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveFunnel
                data={data}
                margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
                valueFormat=">-.4s"
                colors={{ scheme: 'spectral' }}
                borderWidth={20}
                labelColor={{
                    from: 'color',
                    modifiers: [['darker', 3]],
                }}
                beforeSeparatorLength={100}
                beforeSeparatorOffset={20}
                afterSeparatorLength={100}
                afterSeparatorOffset={20}
                currentPartSizeExtension={10}
                currentBorderWidth={40}
                motionConfig="wobbly"
            />
        </div>
    ),
    cover,
    isSnippet: true,
});