import { View } from "react-native";
import { useState } from "react";
import { Motion } from "@legendapp/motion";

import { Palette, Style } from "../styles";

export default () => {
  const [animatedDotIndex, setAnimatedDotIndex] = useState(0);

  setTimeout(() => {
    setAnimatedDotIndex((animatedDotIndex + 1) % 3);
  }, 500);

  return (
    <View
      style={[
        Style.containerSpaceBetween,
        { width: 60, padding: 10, paddingVertical: 5 },
      ]}
    >
      {[1, 2, 3].map((item) => (
        <Motion.View
          key={item}
          animate={{
            opacity: animatedDotIndex === item - 1 ? 1 : 0.2,
          }}
          style={{
            backgroundColor: Palette.white,
            width: 8,
            height: 8,
            borderRadius: 50,
          }}
        />
      ))}
    </View>
  );
};