import React, { useEffect, useRef } from 'react';
import { View, Image, StyleSheet, Animated } from 'react-native';
import { colors } from '../utils/theme';

export default function PlanetCore({ size = 90, glowIntensity = 0.5 }) {
  const breathe = useRef(new Animated.Value(0.3)).current;
  const pulseScale = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    const opacityAnim = Animated.loop(
      Animated.sequence([
        Animated.timing(breathe, {
          toValue: 0.6 * glowIntensity,
          duration: 3000,
          useNativeDriver: true,
        }),
        Animated.timing(breathe, {
          toValue: 0.2 * glowIntensity,
          duration: 3000,
          useNativeDriver: true,
        }),
      ])
    );
    const scaleAnim = Animated.loop(
      Animated.sequence([
        Animated.timing(pulseScale, { toValue: 1.08, duration: 3000, useNativeDriver: true }),
        Animated.timing(pulseScale, { toValue: 1, duration: 3000, useNativeDriver: true }),
      ])
    );
    opacityAnim.start();
    scaleAnim.start();
    return () => { opacityAnim.stop(); scaleAnim.stop(); };
  }, [glowIntensity]);

  return (
    <View style={[styles.container, { width: size * 2.2, height: size * 2.2 }]}>
      {/* Outer glow */}
      <Animated.View
        style={[
          styles.outerGlow,
          {
            width: size * 2,
            height: size * 2,
            borderRadius: size,
            opacity: breathe,
            transform: [{ scale: pulseScale }],
          },
        ]}
      />

      {/* Inner glow */}
      <Animated.View
        style={[
          styles.innerGlow,
          {
            width: size * 1.4,
            height: size * 1.4,
            borderRadius: size * 0.7,
            opacity: breathe,
          },
        ]}
      />

      {/* Planet image */}
      <Image
        source={require('../../assets/icon.png')}
        style={{ width: size, height: size }}
        resizeMode="contain"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  outerGlow: {
    position: 'absolute',
    backgroundColor: colors.planetGlow,
  },
  innerGlow: {
    position: 'absolute',
    backgroundColor: 'rgba(108, 99, 255, 0.35)',
  },
});
