import React from 'react';
import type { ReactElement } from 'react';
import type { ViewProps } from 'react-native';
import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
import { AnimatedSpinner } from './AnimatedSpinner';

interface SpinnerProps extends ViewProps {
  /**
   * Size of Spinner.
   */
  size?: 'small' | 'medium';
  /**
   * Spinner's variant.
   */
  intent?: 'primary' | 'inverted';
  /**
   * Testing id of the component.
   */
  testID?: string;
}

const Spinner = ({
  testID,
  size = 'medium',
  intent = 'primary',
  ...nativeProps
}: SpinnerProps): ReactElement => (
  <StyledView {...nativeProps}>
    <StyledSpinnerContainer testID={testID}>
      <AnimatedSpinner size={size} intent={intent} />
    </StyledSpinnerContainer>
  </StyledView>
);

export default Spinner;