import { FontAwesome } from '@expo/vector-icons'
import { memo, useEffect } from 'react'
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'

const SpinningLoader = memo(() => {
  const rotation = useSharedValue(0)

  useEffect(() => {
    rotation.value = withRepeat(withTiming(360, { duration: 1000, easing: Easing.linear }), -1, false)
  }, [])

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

  return (
    <Animated.View style={animatedStyle}>
      <FontAwesome color="#FFE500" name="circle-o-notch" size={20} />
    </Animated.View>
  )
})

export default SpinningLoader