import React from 'react';
import classNames from 'classnames';
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { getTabIndex } from '../hooks/use-non-native-button-attrs';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function SidebarMenuLink({
  children,
  className,
  link,
  itemKey,
  testId,
  isExternal = false,
  onClick = () => {},
  hasErrors = () => '',
  sectionErrorAriaLabel,
  isDisabled = false
}) {
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsxs("a", {
    className: classNames(className, {
      disabled: isDisabled
    }),
    href: link,
    onClick: e => onClick(e, itemKey),
    target: isExternal ? '_blank' : undefined,
    rel: "noopener noreferrer",
    "test-id": testId,
    tabIndex: getTabIndex(isDisabled),
    children: [children, hasErrors() ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faCircleXmark,
      className: "sidebar-menu-link-error-icon",
      "aria-label": sectionErrorAriaLabel ?? t('Section has errors'),
      "aria-hidden": "false"
    }) : null]
  });
}