import React, { useEffect, useRef } from "react";
import { ActivityIndicator, Animated, Easing, StyleSheet, View } from "react-native";
import { useTheme } from "../../app/contexts/ThemeContext";

const LoadingSymbol = () => {
  const {colors} = useTheme();

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

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

  const styles = StyleSheet.create({
    container: {
      width: "100%",
      height: "100%",
      position: "absolute",
      justifyContent: "center",
      alignItems: "center",
    },
    loader: {
      width: 100,
      height: 100,
      zIndex: 999,
    },
  });

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

export default LoadingSymbol;