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