import React, { FC } from 'react';
import type { ResponsiveValue } from '@shopify/restyle';
import type { Animated } from 'react-native';
import { AnimatedBox } from '../Box';
import type { Theme } from '../../theme/theme';

export const LoadingDot: FC<{
  colorDot?: ResponsiveValue<keyof Theme['colors'], Theme>;
  index: number;
  count: number;
  progress: Animated.Value;
  size?: 'normal' | 'small';
}> = ({ colorDot = 'green', count, progress, index, size = 'normal' }) => {
  return (
    <AnimatedBox
      width={size === 'normal' ? 10 : 8}
      height={size === 'normal' ? 10 : 8}
      borderRadius={size === 'normal' ? 10 : 8}
      backgroundColor={colorDot}
      marginRight={size === 'normal' ? 'spacing-xs' : 'spacing-xxs'}
      style={{
        transform: [
          {
            translateY: progress.interpolate({
              inputRange: [
                0.0,
                (index + 0.5) / (count + 1),
                (index + 1.0) / (count + 1),
                (index + 1.5) / (count + 1),
                1.0,
              ],
              outputRange: [0, -10, -12, -3, 0],
            }),
          },
        ],
      }}
    />
  );
};