import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { Bubble } from "../../../../Bubble/Bubble.js";
import { BubbleHoverTrigger } from "../../../../Bubble/BubbleHoverTrigger.js";
const HEADER_TOOLTIP_ALIGN_POINTS = [{ align: "cr tl" }];
/**
 * @internal
 */
export function ComponentTypeItem({ checked, onChange, questionMarkMessage, itemValue, itemText, className, }) {
    return (_jsxs("label", { className: cx("input-radio-label bottom-space", className), children: [
            _jsx("input", { type: "radio", className: "input-radio", value: itemValue, checked: checked, onChange: onChange }), _jsx("span", { className: "input-label-text", children: itemText }), questionMarkMessage ? (_jsxs(BubbleHoverTrigger, { children: [
                    _jsx("span", { className: "gd-icon-circle-question embed-component-type-help s-circle_question" }), _jsx(Bubble, { className: "bubble-primary", alignPoints: HEADER_TOOLTIP_ALIGN_POINTS, children: _jsx(FormattedMessage, { id: questionMarkMessage }) })
                ] })) : null] }));
}
