const { useState } = wp.element;

const TextRadioButtons = ({
    options = [],
    value = null,
    onChange
}) => {
    const [selectedValue, setSelectedValue] = useState(value);

    const handleSelect = (val) => {
        const newValue = val === selectedValue ? null : val;
        setSelectedValue(newValue);
        onChange && onChange(newValue);
    };

    const handleReset = () => {
        setSelectedValue(null);
        onChange && onChange(null);
    };

    return (
        <div className="text-radio-buttons">
            <div className="trb-options">
                {options.map((opt) => (
                    <button
                        key={opt.value}
                        className={`trb-option ${selectedValue === opt.value ? 'selected' : ''}`}
                        onClick={() => handleSelect(opt.value)}
                        type="button"
                    >
                        {opt.label}
                    </button>
                ))}
            </div>
            {selectedValue !== null && (
                <div>
                <button className="safi-reset" onClick={handleReset} type="button">
                    Reset
                </button>
                </div>
            )}
        </div>
    );
};

export default TextRadioButtons;
