import Animated, {SharedValue, useAnimatedProps} from 'react-native-reanimated';
import {Path} from 'react-native-svg';

import {getSparkleOpacity} from '../../utils';

const AnimatedPath = Animated.createAnimatedComponent(Path);

interface Props {
  d: string;
  color: string;
  starIndex: number;
  isActive: SharedValue<boolean>;
  fillRule?: 'evenodd' | 'nonzero';
  cycleProgress: SharedValue<number>;
}

export function SparklePath({
  d,
  color,
  isActive,
  fillRule,
  starIndex,
  cycleProgress,
}: Props) {
  const animatedProps = useAnimatedProps(() => ({
    opacity: getSparkleOpacity(cycleProgress.value, starIndex, isActive.value),
  }));

  return (
    <AnimatedPath
      d={d}
      fill={color}
      fillRule={fillRule}
      animatedProps={animatedProps}
    />
  );
}
