import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { StyledCircularProgress } from './styled-component';
import { useTheme } from '../Theme';
import { ActivityIndicatorProps } from './types.d';

export const ActivityIndicator: FunctionComponent<ActivityIndicatorProps> = ({
  className = '',
  color,
  customColor,
  size = 20,
  style,
}) => {
  const theme = useTheme();
  const classNames = cn({
    [className]: true,
    square_activity_indicator: true,
  });

  return (
    <StyledCircularProgress
      className={classNames}
      $color={color}
      $theme={theme}
      size={size}
      style={style}
      $customColor={customColor}
    />
  );
};
