import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import metadata from './block.json';

export default function Edit({ attributes, setAttributes }) {
    const { accentColor } = attributes;

    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <InspectorControls>
                <PanelBody title={__('Color Settings', 'author-website-templates')} initialOpen={true}>
                    <PanelColorSettings
                        title={__('Accent Color', 'author-website-templates')}
                        colorSettings={[
                            {
                                value: accentColor,
                                onChange: (color) => setAttributes({ accentColor: color }),
                                label: __('Accent Color', 'author-website-templates'),
                            },
                        ]}
                    />
                </PanelBody>
            </InspectorControls>

            <ServerSideRender
                block={metadata.name}
                attributes={attributes}
            />
        </div>
    );
}
