import React, { useEffect } from 'react';
import { DimensionValue } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  Easing
} from 'react-native-reanimated';
import { Colors } from 'src/theme';

const BlinkingDot = ({
  diameter = 8,
  right = 0,
  top = 0
}: {
  diameter?: number;
  right?: DimensionValue;
  top?: DimensionValue;
}) => {
  const opacity = useSharedValue(1);

  useEffect(() => {
    opacity.value = withRepeat(withTiming(0, { duration: 600, easing: Easing.linear }), -1, true);
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value
    };
  });

  return (
    <Animated.View
      style={[
        {
          width: diameter,
          height: diameter,
          borderRadius: diameter / 2,
          backgroundColor: Colors.RED,
          position: 'absolute',
          right,
          top
        },
        animatedStyle
      ]}
    />
  );
};

export default BlinkingDot;
