import React, { useEffect, PropsWithChildren, useMemo } from 'react';
import { Animated, Easing } from 'react-native';

type RotatingIconProps = { speed?: 1 | 2 | 3 };

const RotatingIcon = ({ speed = 1, children }: PropsWithChildren<RotatingIconProps>) => {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const spinValue = useMemo(() => new Animated.Value(0), [speed]);

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

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

  return <Animated.View style={{ transform: [{ rotate: spin }] }}>{children}</Animated.View>;
};

export default RotatingIcon;
