import React from 'react';
import { Message, MESSAGE_TYPES } from '../message';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
/** Loading Icon inform users about the status of ongoing processes,
 * such as loading an app,
 * submitting a form, or saving updates.
 * ***Notes: For correct centering loader icon should have a parent with
 * "display: flex" style
 * @midnight-gray-supported
 */

export const LoadingIcon = ({
  message,
  id = '',
  testId = '',
  className
}) => {
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsx(Message, {
    className: className,
    type: MESSAGE_TYPES.IN_PROGRESS,
    id: id,
    testId: testId,
    isCentered: true,
    children: message ?? t('Loading...')
  });
};