import { SVGProps, forwardRef } from 'react';

import { useTranslation } from '../../core/hooks/useTranslation';
import { useTestIdAttribute } from '../../hooks/useTestIdAttribute';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';

import { StyledLoader } from './styled';

/** Props for {@link Loader} */
export interface LoaderProps extends CommonProps {
  ariaLabel?: SVGProps<SVGSVGElement>['aria-label'];
}

/**
 * Circular loader indicator.
 *
 * ```tsx
 * import { Loader } from "ui-kit";
 *
 * <Loader />
 * ```
 *
 * You can change the color of the loader by passing `color` prop or by `color` CSS param.
 */
export const Loader = forwardRef<SVGSVGElement, LoaderProps>((props, ref) => {
  const { className, ariaLabel, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const { t } = useTranslation();
  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledLoader
      ref={ref}
      aria-describedby={ariaDescribedBy}
      aria-label={ariaLabel ?? t(`ui.loader`)}
      className={className}
      role="img"
      {...{ [testIdAttribute]: testId }}
    />
  );
});