import React, { useEffect, useMemo, useRef } from 'react';
import { Animated, Easing } from 'react-native';
import { Loader2 } from 'lucide-react-native';

// The native analog of the web's `Loader2 animate-spin` — lucide icons are
// static in React Native, so the rotation is animated here.
export function SpinningLoader({ color, size = 17 }: { color: string; size?: number }) {
  const spin = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const animation = Animated.loop(
      Animated.timing(spin, {
        duration: 900,
        easing: Easing.linear,
        toValue: 1,
        useNativeDriver: true,
      }),
    );
    animation.start();
    return () => animation.stop();
  }, [spin]);

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

  return (
    <Animated.View style={{ transform: [{ rotate }] }}>
      <Loader2 color={color} size={size} strokeWidth={2.3} />
    </Animated.View>
  );
}