import React from 'react';

import type { HostEmit } from '../block/Block';

export default function BlockEditor({ hostObject, hostEmit }: { hostObject?: unknown; hostEmit?: HostEmit }) {
    const onClick = React.useCallback(() => {
        hostEmit?.({ action: 'log', message: 'block editor clicked' });
    }, [hostEmit]);

    return (
        <div style={{ padding: '1rem' }}>
            <div>Page Block Editor</div>
            <button type='button' onClick={onClick}>
                Emit
            </button>
            <pre style={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(hostObject ?? {}, null, 2)}</pre>
        </div>
    );
}