import React from 'react';
import { ActivityIndicator, ViewProps } from 'react-native';

import { useResolvedColor } from '../../../hooks/useResolvedColor';
import { useTheme } from '../../../hooks/useTheme';
import { ColorsWithHue } from '../../../theme/primitives/colors';
import { FontSizes } from '../../../theme/primitives/typography';

export interface SpinnerProps extends ViewProps {
  visible?: boolean;
  color?: ColorsWithHue;
  size?: keyof FontSizes;
}

export const Spinner = ({
  visible = true,
  size = 'lg',
  color = 'grey.500',
  ...rest
}: SpinnerProps) => {
  const resolvedColor = useResolvedColor(color);
  const { fontSizes } = useTheme();

  return (
    <ActivityIndicator
      animating={visible}
      color={resolvedColor}
      size={fontSizes[size]}
      accessibilityLabel="Loading"
      accessible
      {...rest}
    />
  );
};