import Text from "../../../Types/Text";
import React, { useEffect, useId, useState, } from "react";
const Radio = (props) => {
    const uniqueId = useId();
    const errorId = `radio-error-${uniqueId}`;
    const [value, setValue] = useState(props.initialValue || props.value || undefined);
    useEffect(() => {
        setValue(props.value);
    }, [props.value]);
    const groupName = Text.generateRandomText();
    return (React.createElement("div", { className: `mt-2 space-y-2 ${props.className}`, "data-testid": props.dataTestId, role: "radiogroup", "aria-label": props.ariaLabel, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined },
        props.options.map((option, index) => {
            const optionId = `${groupName}-option-${index}`;
            return (React.createElement("div", { key: index, className: "flex items-center gap-x-3" },
                React.createElement("input", { id: optionId, tabIndex: props.tabIndex, checked: value === option.value, onChange: () => {
                        setValue(option.value);
                        if (props.onChange) {
                            props.onChange(option.value);
                        }
                        if (props.onBlur) {
                            props.onBlur();
                        }
                        if (props.onFocus) {
                            props.onFocus();
                        }
                    }, name: groupName, type: "radio", className: "h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" }),
                React.createElement("label", { htmlFor: optionId, className: "block text-sm font-medium leading-6 text-gray-900" }, option.label)));
        }),
        props.error && (React.createElement("p", { id: errorId, "data-testid": "error-message", className: "mt-1 text-sm text-red-400", role: "alert" }, props.error))));
};
export default Radio;
//# sourceMappingURL=Radio.js.map