import React, { forwardRef } from "react";
import { safeUseId } from "../../../../utils";
import { Hint, HintIconWrapper, HintTargetWrapper } from "../../TextArea.styles";
import { IconInfoCircleOutline } from "../../../_Icon";
import { tokens } from "../../TextArea.tokens";
export const HintComponent = /*#__PURE__*/ forwardRef(({ hintText, isHintVisible, hintTrigger, hintTargetIcon, hintPlacement, hintHasArrow, hintOffset, hintWidth, hintContentLeft, isInnerLabel, size, handleHintShow, handleHintHide, handleHintClick }, ref)=>{
    const hintId = safeUseId();
    const getInfoIconSize = ()=>{
        if (!isInnerLabel || size === 'xs') {
            return 'xs';
        }
        return 's';
    };
    return /*#__PURE__*/ React.createElement(Hint, {
        ref: ref,
        text: String(hintText),
        opened: isHintVisible,
        target: /*#__PURE__*/ React.createElement(HintTargetWrapper, null, /*#__PURE__*/ React.createElement(HintIconWrapper, {
            id: hintId,
            ...hintTrigger === 'hover' ? {
                onMouseEnter: handleHintShow,
                onMouseLeave: handleHintHide
            } : {
                onClick: handleHintClick
            }
        }, hintTargetIcon || /*#__PURE__*/ React.createElement(IconInfoCircleOutline, {
            size: getInfoIconSize(),
            color: "inherit",
            sizeCustomProperty: tokens.hintCustomIconTargetSize
        }))),
        placement: hintPlacement,
        hasArrow: hintHasArrow,
        offset: hintOffset,
        minWidth: hintWidth,
        maxWidth: hintWidth,
        contentLeft: hintContentLeft,
        frame: hintId
    });
});
