import classNames from 'classnames';
import useId from '../utilities/useId';

// a type for react icon components that makes the 'title' prop optional & removes 'children' from type
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const SvgIcon = _ref => {
  let {
    ariaHidden,
    className,
    children,
    description,
    id,
    inversed,
    title,
    viewBox,
    ...otherProps
  } = _ref;
  const svgClasses = classNames('ds-c-icon', {
    'ds-c-icon--inverse': inversed
  }, className);
  const rootId = useId('icon--', id);
  const titleId = `${rootId}__title`;
  const descriptionId = `${rootId}__desc`;
  const ariaLabelledBy = description ? `${titleId} ${descriptionId}` : titleId;
  const isSrVisible = !ariaHidden;
  const screenReaderProps = {};
  if (isSrVisible) {
    screenReaderProps['aria-labelledby'] = ariaLabelledBy;
    screenReaderProps['role'] = 'img';
  }
  return /*#__PURE__*/_jsxs("svg", {
    "aria-hidden": ariaHidden,
    className: svgClasses,
    id: id ?? isSrVisible ? rootId : undefined,
    viewBox: viewBox,
    xmlns: "http://www.w3.org/2000/svg",
    ...screenReaderProps,
    ...otherProps,
    children: [isSrVisible && /*#__PURE__*/_jsx("title", {
      id: titleId,
      children: title
    }), isSrVisible && description && /*#__PURE__*/_jsx("desc", {
      id: descriptionId,
      children: description
    }), children]
  });
};
SvgIcon.defaultProps = {
  ariaHidden: true,
  inversed: false
};