import React, { useEffect, useRef } from "react";
import { StyleSheet, View, Animated, Easing, ActivityIndicator } from "react-native";

const LoadingSymbol = () => {
  const color = ["blue", "red", "purple", "green", "yellow", "orange"];
  const random = Math.floor(Math.random() * color.length);

  const spinValue = useRef(new Animated.Value(0)).current;

  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"],
  });

  useEffect(() => {
    Animated.loop(
      Animated.timing(spinValue, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  }, [spinValue]);

  const styles = StyleSheet.create({
    container: {
      backgroundColor: color[random],
      width: "100%",
      height: "100%",
      position: "absolute",
      justifyContent: "center",
      alignItems: "center",
    },
    loader: {
      width: 100,
      height: 100,
      transform: [{ rotate: spin }],
    },
  });

  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="black" style={styles.loader} />
    </View>
    );
};

export default LoadingSymbol;