import React, { useEffect } from 'react';
import { StyleSheet, TextStyle } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withSequence,
  withTiming,
  interpolate,
} from 'react-native-reanimated';
import { COLORS } from '../constants/colors';

interface GlowTextProps {
  text: string;
  style?: TextStyle;
  glowColor?: string;
  fontSize?: number;
}

export const GlowText: React.FC<GlowTextProps> = ({
  text,
  style,
  glowColor = COLORS.primary,
  fontSize = 48,
}) => {
  const pulse = useSharedValue(0);

  useEffect(() => {
    pulse.value = withRepeat(
      withSequence(
        withTiming(1, { duration: 3000 }),
        withTiming(0, { duration: 3000 })
      ),
      -1,
      true
    );
  }, []);

  const animStyle = useAnimatedStyle(() => {
    return {
      textShadowRadius: interpolate(pulse.value, [0, 1], [8, 20]),
      opacity: interpolate(pulse.value, [0, 1], [0.95, 1]),
    };
  });

  return (
    <Animated.Text
      style={[
        styles.text,
        { fontSize },
        {
          textShadowColor: glowColor,
          textShadowOffset: { width: 0, height: 0 },
          textShadowRadius: 12,
        },
        style,
        animStyle,
      ]}
    >
      {text}
    </Animated.Text>
  );
};

const styles = StyleSheet.create({
  text: {
    color: COLORS.primary,
    fontWeight: '900',
    letterSpacing: 8,
    textAlign: 'center',
  },
});