import { createBoard } from '@wixc3/react-board';
import { Button, Classes, H5, Popover } from '@blueprintjs/core';

// board cover
import cover from '../../../../../src/assets/popover/popover.svg';

export default createBoard({
    name: 'Popover',
    Board: () => (
        <Popover
            popoverClassName={Classes.POPOVER_CONTENT_SIZING}
            enforceFocus={false}
            content={
                <div key="text">
                    <H5>Confirm deletion</H5>
                    <p>
                        Are you sure you want to delete these items? You won't
                        be able to recover them.
                    </p>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'flex-end',
                            marginTop: 15,
                        }}
                    >
                        <Button
                            className={Classes.POPOVER_DISMISS}
                            style={{ marginRight: 10 }}
                        >
                            Cancel
                        </Button>
                        <Button
                            className={Classes.POPOVER_DISMISS}
                            intent="danger"
                        >
                            Delete
                        </Button>
                    </div>
                </div>
            }
        >
            <Button intent="primary" text="Click me!" />
        </Popover>
    ),
    tags: ['popover', 'primary'],
    cover,
});
