managarten/memoro/apps/mobile/components/molecules/PulsingLogoAnimation.tsx

import React, { useEffect, useRef } from 'react';
import { View, Animated, ViewStyle } from 'react-native';
import MemoroLogo from '~/components/atoms/MemoroLogo';
import { useTheme } from '~/features/theme/ThemeProvider';

interface PulsingLogoAnimationProps {
  size?: number;
  style?: ViewStyle;
  color?: string;
}

/**
 * Einfache pulsierende Logo-Animation
 * Minimalistisch und elegant - perfekt für Loading-States
 */
export function PulsingLogoAnimation({
  size = 80,
  style,
  color
}: PulsingLogoAnimationProps) {
  const { colors } = useTheme();
  const scaleAnim = useRef(new Animated.Value(1)).current;
  const opacityAnim = useRef(new Animated.Value(1)).current;

  const logoColor = color || colors.primary;

  useEffect(() => {
    // Kombinierte Scale + Opacity Animation
    const animation = Animated.loop(
      Animated.sequence([
        Animated.parallel([
          Animated.timing(scaleAnim, {
            toValue: 1.1,
            duration: 1000,
            useNativeDriver: true,
          }),
          Animated.timing(opacityAnim, {
            toValue: 0.6,
            duration: 1000,
            useNativeDriver: true,
          }),
        ]),
        Animated.parallel([
          Animated.timing(scaleAnim, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true,
          }),
          Animated.timing(opacityAnim, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true,
          }),
        ]),
      ])
    );

    animation.start();

    return () => animation.stop();
  }, [scaleAnim, opacityAnim]);

  return (
    <View style={[{ alignItems: 'center', justifyContent: 'center' }, style]}>
      <Animated.View
        style={{
          transform: [{ scale: scaleAnim }],
          opacity: opacityAnim,
        }}>
        <MemoroLogo size={size} color={logoColor} />
      </Animated.View>
    </View>
  );
}