import React, { useState } from 'react';

const EditPropertyGroup = ({ propertyGroup, onClose }) => {
    const [labelTranslation, setLabelTranslation] = useState(propertyGroup.labelTranslation);
    const [description, setDescription] = useState(propertyGroup.description);

    return (
        <div>
            <h2 className="editor-title">Edit Property Group</h2>
            <div className="editor">
                <label>
                <span className={`flex flex-row gap-2`}>
                    <p className={``}>Name:</p>
                    <input className='input_text' type="text" value={labelTranslation} onChange={(e) => setLabelTranslation(e.target.value)} />
                </span>
                </label>
                <span>
                <label>
                    Description:
                    <textarea className='input_area' value={description} onChange={(e) => setDescription(e.target.value)} />
                </label>
                </span> 
            </div>
            <button onClick={onClose}>Save</button>
        </div>
    );
};

export default EditPropertyGroup;