import React from 'react';
import { X } from '../../../icons/X/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { Tooltip } from '../../Tooltip/index.js';
const baseClass = 'multi-value-remove';
export const MultiValueRemove = (props)=>{
    const { innerProps: { className, onClick, onTouchEnd } } = props;
    const [showTooltip, setShowTooltip] = React.useState(false);
    const { t } = useTranslation();
    return /*#__PURE__*/ React.createElement("button", {
        "aria-label": t('general:remove'),
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' '),
        onClick: (e)=>{
            setShowTooltip(false);
            onClick(e);
        },
        onMouseEnter: ()=>setShowTooltip(true),
        onMouseLeave: ()=>setShowTooltip(false),
        onTouchEnd: onTouchEnd,
        type: "button"
    }, /*#__PURE__*/ React.createElement(Tooltip, {
        className: `${baseClass}__tooltip`,
        show: showTooltip
    }, t('general:remove')), /*#__PURE__*/ React.createElement(X, {
        className: `${baseClass}__icon`
    }));
};

//# sourceMappingURL=index.js.map