import * as React from 'react';
import { MaterialIndicator } from 'react-native-indicators';
import { getColor } from './style-utils';

type SpinnerSize =
  | '2xsmall'
  | 'xsmall'
  | 'small'
  | 'medium'
  | 'large'
  | 'xlarge';

const SIZE_MAP: Record<SpinnerSize, number> = {
  '2xsmall': 12,
  xsmall: 16,
  small: 20,
  medium: 24,
  large: 32,
  xlarge: 40,
};

interface SpinnerProps {
  size?: SpinnerSize;
  color?: string;
  className?: string;
}

export default function Spinner({
  size = '2xsmall',
  color = '#10B981',
  className,
}: SpinnerProps) {
  const dimension = SIZE_MAP[size];
  const finalColor = getColor(color);

  return (
    <MaterialIndicator
      color={finalColor}
      size={dimension}
      trackWidth={dimension / 15}
    />
  );
}