import './style.css';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {

    const blockProps = useBlockProps({
        className: 'ez-tarot-block-editor'
    });

    return (
        <>
            <InspectorControls>
                <PanelBody title="Tarot Settings" initialOpen={true}>
                    <TextControl
                        label="Language"
                        value={attributes.language}
                        onChange={(value) => setAttributes({ language: value })}
                    />
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                <div className="tarot-editor-placeholder">
                    <h2>Tarot 3-Card Spread</h2>
                    <p>This is an interactive tarot reading block.</p>
                    <p><strong>Frontend Only:</strong> Preview the page to view the Tarot.</p>
                </div>
            </div>
        </>
    );
}
