import { forwardRef, useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
import type { RsSkinlessSkeletonProps } from '../../types/props';

type ViewRef = View;

const RsSkeleton = forwardRef<ViewRef, RsSkinlessSkeletonProps>(
  ({ width, height, borderRadius, style }, ref) => {
    const opacity = useRef(new Animated.Value(0.3)).current;

    useEffect(() => {
      const animation = Animated.loop(
        Animated.sequence([
          Animated.timing(opacity, {
            toValue: 1,
            duration: 800,
            useNativeDriver: true,
          }),
          Animated.timing(opacity, {
            toValue: 0.3,
            duration: 800,
            useNativeDriver: true,
          }),
        ])
      );
      animation.start();
      return () => animation.stop();
    }, [opacity]);

    return (
      <Animated.View
        ref={ref}
        style={[{ width, height, borderRadius, opacity }, style]}
      />
    );
  }
);

RsSkeleton.displayName = 'RsSkeleton';

export default RsSkeleton;