import React from 'react';
import classNames from 'classnames';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { BUTTON_TYPES } from '../button';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
function FilterItem({
  id,
  filter,
  onClearOne,
  deleteFilterItemText
}) {
  const {
    content,
    className,
    label,
    testId,
    tooltipText
  } = filter;
  return /*#__PURE__*/_jsxs("div", {
    id: id,
    className: classNames('filter-item', className),
    role: "listitem",
    "test-id": testId,
    children: [label && /*#__PURE__*/_jsxs("span", {
      className: "filter-item-label",
      children: [label, ":"]
    }), /*#__PURE__*/_jsx(TruncateWithTooltip, {
      className: "filter-item-content",
      tooltipText: tooltipText,
      children: /*#__PURE__*/_jsx("span", {
        "test-id": `${testId}-content`,
        children: content
      })
    }), /*#__PURE__*/_jsx("button", {
      onClick: () => onClearOne(filter),
      className: "button command",
      "test-id": "filter-remove",
      "aria-label": deleteFilterItemText,
      "aria-labelledby": id,
      type: BUTTON_TYPES.BUTTON,
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faXmark
      })
    })]
  });
}
export default FilterItem;