'use client';

import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Animated, StyleSheet, View } from 'react-native';

const AnimatedDots = () => {
  const dot1 = useRef(new Animated.Value(0)).current;
  const dot2 = useRef(new Animated.Value(0)).current;
  const dot3 = useRef(new Animated.Value(0)).current;

  const animationConfig = useMemo(
    () => ({
      duration: 300,
      useNativeDriver: true,
    }),
    [],
  );

  const createTimingAnimation = useCallback(
    (value: Animated.Value, toValue: number) => {
      return Animated.timing(value, {
        toValue,
        ...animationConfig,
      });
    },
    [animationConfig],
  );

  const animationSequence = useMemo(() => {
    return Animated.sequence([
      createTimingAnimation(dot1, 1),
      createTimingAnimation(dot2, 1),
      createTimingAnimation(dot3, 1),
      createTimingAnimation(dot1, 0),
      createTimingAnimation(dot2, 0),
      createTimingAnimation(dot3, 0),
    ]);
  }, [dot1, dot2, dot3, createTimingAnimation]);

  useEffect(() => {
    const animateDots = () => {
      Animated.loop(animationSequence).start();
    };

    animateDots();
  }, [animationSequence]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.dot, { opacity: dot1 }]} />
      <Animated.View style={[styles.dot, { opacity: dot2 }]} />
      <Animated.View style={[styles.dot, { opacity: dot3 }]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 8,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#28A7E8',
  },
});

export default AnimatedDots;