import React from 'react';
import classNames from 'classnames';
import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
/** Tooltip component that provides info icon out of the box
 * [CAPITALIZATION] Text must be in sentence case. If it is full sentence should have a period
 */
export const InfoIcon = ({
  children,
  className,
  placement = TOOLTIP_PLACEMENT_TYPES.RIGHT,
  ariaLabel,
  docsLink,
  testId
}) => {
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsx(Tooltip, {
    content: children,
    placement: placement,
    docsLink: docsLink,
    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faCircleInfo,
      "aria-label": ariaLabel ?? t('Info-icon with extra information in a tooltip'),
      "aria-hidden": "false",
      tabIndex: 0 // always should be focusable when navigating with a keyboard because important explanation is provided.
      ,
      className: classNames('info-icon', className),
      "test-id": testId
    })
  });
};