import React, {useEffect} from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';
import {IconLoader} from '@tabler/icons-react-native';
import {ICON_SIZES, useTheme} from '@shared/theme';

const AnimatedIconLoader = Animated.createAnimatedComponent(IconLoader);

export const Spinner = () => {
  const rotation = useSharedValue(0);
  const {theme} = useTheme();

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(360, {duration: 1800, easing: Easing.linear}),
      -1,
      false,
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{rotate: `${rotation.value}deg`}],
  }));

  return (
    <AnimatedIconLoader
      size={ICON_SIZES.x5}
      color={theme.brand[500]}
      style={animatedStyle}
    />
  );
};
