import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  withDelay,
  Easing,
} from 'react-native-reanimated';
import { responsiveFontSize } from 'react-native-responsive-dimensions';

const AnimatedText = ({ text, style, delay = 0 }) => {
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(20);

  useEffect(() => {
    opacity.value = withDelay(delay, withTiming(1, { duration: 800 }));
    translateY.value = withDelay(delay, withTiming(0, { duration: 800 }));
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <Animated.Text style={[styles.text, style, animatedStyle]}>
      {text}
    </Animated.Text>
  );
};

export default AnimatedText;

// Usage
const MyComponent = () => {
  return (
    <View style={styles.container}>
      <AnimatedText text="Hello World" style={styles.title} />
      <AnimatedText text="Welcome to Reanimated" style={styles.subtitle} delay={200} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: responsiveFontSize(2.5),
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: responsiveFontSize(1.8),
    color: '#666',
  },
  text: {
    textAlign: 'center',
  },
});