import { useState } from '@wordpress/element';
import { Button, Modal, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const LCPHTMLModal= () => {
    // State to control modal visibility and text value
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [textValue, setTextValue] = useState('');

    // Open modal function
    const openModal = () => setIsModalOpen(true);

    // Close modal function
    const closeModal = () => setIsModalOpen(false);

    // Handle text change
    const handleTextChange = (newValue) => {
        setTextValue(newValue);
    };

    return (
        <div>
            {/* Button to trigger modal */}
            <Button isPrimary onClick={openModal}>
                {__('Open Modal', 'lcp')}
            </Button>

            {/* Modal */}
            {isModalOpen && (
                <Modal
                    title={__('Text Area Modal', 'lcp')}
                    onRequestClose={closeModal}
                    className="my-modal"
                >
                    {/* Modal content */}
                    <div>
                        <TextControl
                            label={__('Enter your text:', 'lcp')}
                            value={textValue}
                            onChange={handleTextChange}
                            placeholder={__('Type here...', 'lcp')}
                            style={{ width: '100%', minHeight: '100px' }}
                        />
                    </div>

                    {/* Modal footer */}
                    <div style={{ marginTop: '16px', textAlign: 'right' }}>
                        <Button onClick={closeModal}>{__('Close', 'lcp')}</Button>
                    </div>
                </Modal>
            )}
        </div>
    );
};

export default LCPHTMLModal;