import { useEffect, useRef } from 'react'
import { View, StyleSheet, Animated, Easing } from 'react-native'

interface SkeletonProps {
    width?: number | string
    height?: number | string
    borderRadius?: number
    style?: any
}

export function Skeleton({
    width = '100%',
    height = 20,
    borderRadius = 4,
    style,
}: SkeletonProps) {
    const animatedValue = useRef(new Animated.Value(0)).current

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

    const opacity = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0.3, 0.7],
    })

    return (
        <Animated.View
            style={[
                {
                    width,
                    height,
                    borderRadius,
                    backgroundColor: '#1C1E22',
                    opacity,
                },
                style,
            ]}
        />
    )
}