import React, { useEffect } from 'react';
import { animated, useSpring } from 'react-spring';
import { useTheme } from 'styled-components';
import { usePrevious } from '../hooks/';

type AnimatedGlitterIconProps = {
  active: boolean;
  variant?: 'default' | 'light';
  scaleBy?: number;
  color?: string;
  width?: number;
  height?: number;
  onAnimationComplete?: () => void;
};

const STEP_DURATION_MS = 200;
export const TOTAL_DURATION_MS = STEP_DURATION_MS * 2;

const AnimatedGlitterIcon = ({
  active,
  variant = 'default',
  color = '#000000',
  width = 24,
  height = 24,
  scaleBy = 1.4,
  onAnimationComplete,
}: AnimatedGlitterIconProps) => {
  const { colors } = useTheme();
  const prevActive = usePrevious(active);

  useEffect(() => {
    if (active && !prevActive) {
      setTimeout(() => {
        onAnimationComplete?.();
      }, TOTAL_DURATION_MS);
    }
  }, [active, prevActive]);

  const fadeInAfterAnimationComplete = useSpring({
    opacity: active ? 1 : 0,
    delay: TOTAL_DURATION_MS,
    config: { duration: TOTAL_DURATION_MS },
  });

  const outlineAnimation = useSpring({
    fill: active
      ? colors.primary[variant === 'light' ? 400 : 700]
      : colors.neutral[600],
    config: { duration: STEP_DURATION_MS },
  });

  const growAnimationFirst = useSpring({
    transform: active ? 'scale(1)' : 'scale(0)',
    config: { duration: STEP_DURATION_MS },
  });

  const growAnimationSecond = useSpring({
    transform: active ? 'scale(1)' : 'scale(0)',
    delay: STEP_DURATION_MS,
    config: { duration: STEP_DURATION_MS },
  });

  const { keyframe } = useSpring({
    keyframe: active ? 1 : 0,
    delay: 0,
    config: { duration: active ? TOTAL_DURATION_MS : 0 },
  });

  return (
    <animated.svg
      width={width}
      height={height}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 49 48"
      style={{
        transformOrigin: '50% 50%',
        transform: keyframe
          .to([0, 0.3, 0.6, 1], [1, scaleBy, 1.1, 1.1])
          .to((x) => `scale(${x})`),
      }}
    >
      {!active ? (
        <>
          <path
            d="M32.2252 40.3567C31.6668 39.11 30.6617 38.1177 29.408 37.5752L27.812 36.8846C27.787 36.8738 27.7808 36.864 27.7782 36.8598C27.7732 36.8519 27.7676 36.8372 27.7676 36.817C27.7676 36.7968 27.7732 36.782 27.7782 36.7741C27.7808 36.7699 27.787 36.7601 27.812 36.7493L29.3624 36.0784C30.6484 35.522 31.6715 34.4929 32.2203 33.2037L32.799 31.8446C32.8099 31.8191 32.8197 31.8129 32.8237 31.8104C32.8316 31.8054 32.8464 31.7997 32.8668 31.7997C32.8873 31.7997 32.9021 31.8054 32.91 31.8104C32.914 31.8129 32.9238 31.8191 32.9347 31.8446L33.7162 31.5119L32.9347 31.8446L33.5133 33.2037C34.0622 34.4929 35.0853 35.522 36.3712 36.0784L37.9217 36.7493C37.9467 36.7601 37.9529 36.7699 37.9555 36.7741C37.9605 36.782 37.9661 36.7968 37.9661 36.817C37.9661 36.8372 37.9605 36.8519 37.9555 36.8598C37.9529 36.864 37.9467 36.8738 37.9217 36.8846L36.3257 37.5752C35.072 38.1177 34.0669 39.11 33.5085 40.3567L32.9341 41.639C32.9233 41.6632 32.9136 41.6694 32.9091 41.6722C32.9011 41.6772 32.8865 41.6826 32.8668 41.6826C32.8472 41.6826 32.8326 41.6772 32.8246 41.6722C32.8201 41.6694 32.8104 41.6632 32.7995 41.639L32.2252 40.3567Z"
            stroke={color}
            strokeWidth="1.69867"
          />
          <path
            d="M36.4918 14.8193C35.9334 13.5727 34.9283 12.5803 33.6746 12.0379L32.0786 11.3473C32.0536 11.3364 32.0474 11.3267 32.0448 11.3225C32.0398 11.3146 32.0342 11.2998 32.0342 11.2796C32.0342 11.2594 32.0398 11.2447 32.0448 11.2367C32.0474 11.2326 32.0536 11.2228 32.0786 11.2119L33.629 10.5411C34.915 9.98466 35.9381 8.95555 36.4869 7.66637L37.0656 6.3072C37.0765 6.2817 37.0863 6.27554 37.0903 6.27301C37.0982 6.26808 37.113 6.26234 37.1334 6.26234C37.1539 6.26234 37.1687 6.26808 37.1766 6.27301C37.1806 6.27554 37.1904 6.28171 37.2013 6.3072L37.9828 5.9745L37.2013 6.3072L37.78 7.66636C38.3288 8.95555 39.3519 9.98467 40.6379 10.5411L42.1883 11.2119C42.2133 11.2228 42.2195 11.2326 42.2221 11.2367C42.2271 11.2447 42.2327 11.2594 42.2327 11.2796C42.2327 11.2998 42.2271 11.3146 42.2221 11.3225C42.2195 11.3267 42.2133 11.3364 42.1883 11.3473L40.5923 12.0379C39.3386 12.5803 38.3335 13.5727 37.7751 14.8193L37.2007 16.1017C37.1899 16.1258 37.1802 16.1321 37.1757 16.1349C37.1677 16.1398 37.1531 16.1452 37.1334 16.1452C37.1138 16.1452 37.0992 16.1398 37.0912 16.1349C37.0867 16.1321 37.077 16.1258 37.0661 16.1017L36.4918 14.8193Z"
            stroke={color}
            strokeWidth="1.69867"
          />
          <path
            d="M14.462 32.2294L16.4849 36.561C16.8157 37.2694 17.8223 37.2715 18.156 36.5645L20.2222 32.1878C21.3481 29.8027 23.2882 27.8976 25.6934 26.8153L30.0961 24.834C30.8218 24.5075 30.8218 23.4771 30.0961 23.1505L25.6821 21.1642C23.2838 20.0849 21.3476 18.1875 20.2202 15.8114L18.1552 11.4594C17.8208 10.7546 16.8171 10.7567 16.4857 11.4628L14.4641 15.7697C13.3368 18.1713 11.385 20.0886 8.96357 21.1728L4.54828 23.1498C3.82048 23.4757 3.82048 24.5089 4.54828 24.8347L8.95233 26.8067C11.3805 27.8939 13.3363 29.8188 14.462 32.2294Z"
            stroke={color}
            strokeWidth="2.49867"
          />
        </>
      ) : (
        <>
          {/* First growing glitter [lowest z-index] - don't show on the light variant */}
          {variant == 'default' && (
            <>
              <animated.path
                d="M32.2252 40.3567C31.6668 39.11 30.6617 38.1177 29.408 37.5752L27.812 36.8846C27.787 36.8738 27.7808 36.864 27.7782 36.8598C27.7732 36.8519 27.7676 36.8372 27.7676 36.817C27.7676 36.7968 27.7732 36.782 27.7782 36.7741C27.7808 36.7699 27.787 36.7601 27.812 36.7493L29.3624 36.0784C30.6484 35.522 31.6715 34.4929 32.2203 33.2037L32.799 31.8446C32.8099 31.8191 32.8197 31.8129 32.8237 31.8104C32.8316 31.8054 32.8464 31.7997 32.8668 31.7997C32.8873 31.7997 32.9021 31.8054 32.91 31.8104C32.914 31.8129 32.9238 31.8191 32.9347 31.8446L33.7162 31.5119L32.9347 31.8446L33.5133 33.2037C34.0622 34.4929 35.0853 35.522 36.3712 36.0784L37.9217 36.7493C37.9467 36.7601 37.9529 36.7699 37.9555 36.7741C37.9605 36.782 37.9661 36.7968 37.9661 36.817C37.9661 36.8372 37.9605 36.8519 37.9555 36.8598C37.9529 36.864 37.9467 36.8738 37.9217 36.8846L36.3257 37.5752C35.072 38.1177 34.0669 39.11 33.5085 40.3567L32.9341 41.639C32.9233 41.6632 32.9136 41.6694 32.9091 41.6722C32.9011 41.6772 32.8865 41.6826 32.8668 41.6826C32.8472 41.6826 32.8326 41.6772 32.8246 41.6722C32.8201 41.6694 32.8104 41.6632 32.7995 41.639L32.2252 40.3567Z"
                strokeWidth="1.69867"
                fill={colors.primary[500]}
                style={{ transformOrigin: '65% 70%' }}
                {...growAnimationFirst}
              />
              <animated.path
                d="M36.4918 14.8193C35.9334 13.5727 34.9283 12.5803 33.6746 12.0379L32.0786 11.3473C32.0536 11.3364 32.0474 11.3267 32.0448 11.3225C32.0398 11.3146 32.0342 11.2998 32.0342 11.2796C32.0342 11.2594 32.0398 11.2447 32.0448 11.2367C32.0474 11.2326 32.0536 11.2228 32.0786 11.2119L33.629 10.5411C34.915 9.98466 35.9381 8.95555 36.4869 7.66637L37.0656 6.3072C37.0765 6.2817 37.0863 6.27554 37.0903 6.27301C37.0982 6.26808 37.113 6.26234 37.1334 6.26234C37.1539 6.26234 37.1687 6.26808 37.1766 6.27301C37.1806 6.27554 37.1904 6.28171 37.2013 6.3072L37.9828 5.9745L37.2013 6.3072L37.78 7.66636C38.3288 8.95555 39.3519 9.98467 40.6379 10.5411L42.1883 11.2119C42.2133 11.2228 42.2195 11.2326 42.2221 11.2367C42.2271 11.2447 42.2327 11.2594 42.2327 11.2796C42.2327 11.2998 42.2271 11.3146 42.2221 11.3225C42.2195 11.3267 42.2133 11.3364 42.1883 11.3473L40.5923 12.0379C39.3386 12.5803 38.3335 13.5727 37.7751 14.8193L37.2007 16.1017C37.1899 16.1258 37.1802 16.1321 37.1757 16.1349C37.1677 16.1398 37.1531 16.1452 37.1334 16.1452C37.1138 16.1452 37.0992 16.1398 37.0912 16.1349C37.0867 16.1321 37.077 16.1258 37.0661 16.1017L36.4918 14.8193Z"
                strokeWidth="1.69867"
                fill={colors.primary[500]}
                style={{ transformOrigin: '75% 17%' }}
                {...growAnimationFirst}
              />
              <animated.path
                d="M14.462 32.2294L16.4849 36.561C16.8157 37.2694 17.8223 37.2715 18.156 36.5645L20.2222 32.1878C21.3481 29.8027 23.2882 27.8976 25.6934 26.8153L30.0961 24.834C30.8218 24.5075 30.8218 23.4771 30.0961 23.1505L25.6821 21.1642C23.2838 20.0849 21.3476 18.1875 20.2202 15.8114L18.1552 11.4594C17.8208 10.7546 16.8171 10.7567 16.4857 11.4628L14.4641 15.7697C13.3368 18.1713 11.385 20.0886 8.96357 21.1728L4.54828 23.1498C3.82048 23.4757 3.82048 24.5089 4.54828 24.8347L8.95233 26.8067C11.3805 27.8939 13.3363 29.8188 14.462 32.2294Z"
                strokeWidth="2.49867"
                fill={colors.primary[500]}
                style={{ transformOrigin: '42% 37%' }}
                {...growAnimationFirst}
              />
            </>
          )}

          {/* Glitter outline */}
          <animated.path
            d="M32.2252 40.3567C31.6668 39.11 30.6617 38.1177 29.408 37.5752L27.812 36.8846C27.787 36.8738 27.7808 36.864 27.7782 36.8598C27.7732 36.8519 27.7676 36.8372 27.7676 36.817C27.7676 36.7968 27.7732 36.782 27.7782 36.7741C27.7808 36.7699 27.787 36.7601 27.812 36.7493L29.3624 36.0784C30.6484 35.522 31.6715 34.4929 32.2203 33.2037L32.799 31.8446C32.8099 31.8191 32.8197 31.8129 32.8237 31.8104C32.8316 31.8054 32.8464 31.7997 32.8668 31.7997C32.8873 31.7997 32.9021 31.8054 32.91 31.8104C32.914 31.8129 32.9238 31.8191 32.9347 31.8446L33.7162 31.5119L32.9347 31.8446L33.5133 33.2037C34.0622 34.4929 35.0853 35.522 36.3712 36.0784L37.9217 36.7493C37.9467 36.7601 37.9529 36.7699 37.9555 36.7741C37.9605 36.782 37.9661 36.7968 37.9661 36.817C37.9661 36.8372 37.9605 36.8519 37.9555 36.8598C37.9529 36.864 37.9467 36.8738 37.9217 36.8846L36.3257 37.5752C35.072 38.1177 34.0669 39.11 33.5085 40.3567L32.9341 41.639C32.9233 41.6632 32.9136 41.6694 32.9091 41.6722C32.9011 41.6772 32.8865 41.6826 32.8668 41.6826C32.8472 41.6826 32.8326 41.6772 32.8246 41.6722C32.8201 41.6694 32.8104 41.6632 32.7995 41.639L32.2252 40.3567Z"
            strokeWidth="1.69867"
            {...outlineAnimation}
          />
          <animated.path
            d="M36.4918 14.8193C35.9334 13.5727 34.9283 12.5803 33.6746 12.0379L32.0786 11.3473C32.0536 11.3364 32.0474 11.3267 32.0448 11.3225C32.0398 11.3146 32.0342 11.2998 32.0342 11.2796C32.0342 11.2594 32.0398 11.2447 32.0448 11.2367C32.0474 11.2326 32.0536 11.2228 32.0786 11.2119L33.629 10.5411C34.915 9.98466 35.9381 8.95555 36.4869 7.66637L37.0656 6.3072C37.0765 6.2817 37.0863 6.27554 37.0903 6.27301C37.0982 6.26808 37.113 6.26234 37.1334 6.26234C37.1539 6.26234 37.1687 6.26808 37.1766 6.27301C37.1806 6.27554 37.1904 6.28171 37.2013 6.3072L37.9828 5.9745L37.2013 6.3072L37.78 7.66636C38.3288 8.95555 39.3519 9.98467 40.6379 10.5411L42.1883 11.2119C42.2133 11.2228 42.2195 11.2326 42.2221 11.2367C42.2271 11.2447 42.2327 11.2594 42.2327 11.2796C42.2327 11.2998 42.2271 11.3146 42.2221 11.3225C42.2195 11.3267 42.2133 11.3364 42.1883 11.3473L40.5923 12.0379C39.3386 12.5803 38.3335 13.5727 37.7751 14.8193L37.2007 16.1017C37.1899 16.1258 37.1802 16.1321 37.1757 16.1349C37.1677 16.1398 37.1531 16.1452 37.1334 16.1452C37.1138 16.1452 37.0992 16.1398 37.0912 16.1349C37.0867 16.1321 37.077 16.1258 37.0661 16.1017L36.4918 14.8193Z"
            strokeWidth="1.69867"
            {...outlineAnimation}
          />
          <animated.path
            d="M14.462 32.2294L16.4849 36.561C16.8157 37.2694 17.8223 37.2715 18.156 36.5645L20.2222 32.1878C21.3481 29.8027 23.2882 27.8976 25.6934 26.8153L30.0961 24.834C30.8218 24.5075 30.8218 23.4771 30.0961 23.1505L25.6821 21.1642C23.2838 20.0849 21.3476 18.1875 20.2202 15.8114L18.1552 11.4594C17.8208 10.7546 16.8171 10.7567 16.4857 11.4628L14.4641 15.7697C13.3368 18.1713 11.385 20.0886 8.96357 21.1728L4.54828 23.1498C3.82048 23.4757 3.82048 24.5089 4.54828 24.8347L8.95233 26.8067C11.3805 27.8939 13.3363 29.8188 14.462 32.2294Z"
            strokeWidth="2.49867"
            {...outlineAnimation}
          />

          {/* Second growing glitter */}
          <animated.path
            d="M32.2252 40.3567C31.6668 39.11 30.6617 38.1177 29.408 37.5752L27.812 36.8846C27.787 36.8738 27.7808 36.864 27.7782 36.8598C27.7732 36.8519 27.7676 36.8372 27.7676 36.817C27.7676 36.7968 27.7732 36.782 27.7782 36.7741C27.7808 36.7699 27.787 36.7601 27.812 36.7493L29.3624 36.0784C30.6484 35.522 31.6715 34.4929 32.2203 33.2037L32.799 31.8446C32.8099 31.8191 32.8197 31.8129 32.8237 31.8104C32.8316 31.8054 32.8464 31.7997 32.8668 31.7997C32.8873 31.7997 32.9021 31.8054 32.91 31.8104C32.914 31.8129 32.9238 31.8191 32.9347 31.8446L33.7162 31.5119L32.9347 31.8446L33.5133 33.2037C34.0622 34.4929 35.0853 35.522 36.3712 36.0784L37.9217 36.7493C37.9467 36.7601 37.9529 36.7699 37.9555 36.7741C37.9605 36.782 37.9661 36.7968 37.9661 36.817C37.9661 36.8372 37.9605 36.8519 37.9555 36.8598C37.9529 36.864 37.9467 36.8738 37.9217 36.8846L36.3257 37.5752C35.072 38.1177 34.0669 39.11 33.5085 40.3567L32.9341 41.639C32.9233 41.6632 32.9136 41.6694 32.9091 41.6722C32.9011 41.6772 32.8865 41.6826 32.8668 41.6826C32.8472 41.6826 32.8326 41.6772 32.8246 41.6722C32.8201 41.6694 32.8104 41.6632 32.7995 41.639L32.2252 40.3567Z"
            strokeWidth="1.69867"
            fill={colors.primary[variant === 'light' ? 500 : 700]}
            style={{ transformOrigin: '65% 70%' }}
            {...growAnimationSecond}
          />
          <animated.path
            d="M36.4918 14.8193C35.9334 13.5727 34.9283 12.5803 33.6746 12.0379L32.0786 11.3473C32.0536 11.3364 32.0474 11.3267 32.0448 11.3225C32.0398 11.3146 32.0342 11.2998 32.0342 11.2796C32.0342 11.2594 32.0398 11.2447 32.0448 11.2367C32.0474 11.2326 32.0536 11.2228 32.0786 11.2119L33.629 10.5411C34.915 9.98466 35.9381 8.95555 36.4869 7.66637L37.0656 6.3072C37.0765 6.2817 37.0863 6.27554 37.0903 6.27301C37.0982 6.26808 37.113 6.26234 37.1334 6.26234C37.1539 6.26234 37.1687 6.26808 37.1766 6.27301C37.1806 6.27554 37.1904 6.28171 37.2013 6.3072L37.9828 5.9745L37.2013 6.3072L37.78 7.66636C38.3288 8.95555 39.3519 9.98467 40.6379 10.5411L42.1883 11.2119C42.2133 11.2228 42.2195 11.2326 42.2221 11.2367C42.2271 11.2447 42.2327 11.2594 42.2327 11.2796C42.2327 11.2998 42.2271 11.3146 42.2221 11.3225C42.2195 11.3267 42.2133 11.3364 42.1883 11.3473L40.5923 12.0379C39.3386 12.5803 38.3335 13.5727 37.7751 14.8193L37.2007 16.1017C37.1899 16.1258 37.1802 16.1321 37.1757 16.1349C37.1677 16.1398 37.1531 16.1452 37.1334 16.1452C37.1138 16.1452 37.0992 16.1398 37.0912 16.1349C37.0867 16.1321 37.077 16.1258 37.0661 16.1017L36.4918 14.8193Z"
            strokeWidth="1.69867"
            fill={colors.primary[variant === 'light' ? 500 : 700]}
            style={{ transformOrigin: '75% 17%' }}
            {...growAnimationSecond}
          />
          <animated.path
            d="M14.462 32.2294L16.4849 36.561C16.8157 37.2694 17.8223 37.2715 18.156 36.5645L20.2222 32.1878C21.3481 29.8027 23.2882 27.8976 25.6934 26.8153L30.0961 24.834C30.8218 24.5075 30.8218 23.4771 30.0961 23.1505L25.6821 21.1642C23.2838 20.0849 21.3476 18.1875 20.2202 15.8114L18.1552 11.4594C17.8208 10.7546 16.8171 10.7567 16.4857 11.4628L14.4641 15.7697C13.3368 18.1713 11.385 20.0886 8.96357 21.1728L4.54828 23.1498C3.82048 23.4757 3.82048 24.5089 4.54828 24.8347L8.95233 26.8067C11.3805 27.8939 13.3363 29.8188 14.462 32.2294Z"
            strokeWidth="2.49867"
            fill={colors.primary[variant === 'light' ? 500 : 700]}
            style={{ transformOrigin: '42% 37%' }}
            {...growAnimationSecond}
          />

          {/* Final filled glitter [highest z-index] */}

          <animated.path
            d="M32.2252 40.3567C31.6668 39.11 30.6617 38.1177 29.408 37.5752L27.812 36.8846C27.787 36.8738 27.7808 36.864 27.7782 36.8598C27.7732 36.8519 27.7676 36.8372 27.7676 36.817C27.7676 36.7968 27.7732 36.782 27.7782 36.7741C27.7808 36.7699 27.787 36.7601 27.812 36.7493L29.3624 36.0784C30.6484 35.522 31.6715 34.4929 32.2203 33.2037L32.799 31.8446C32.8099 31.8191 32.8197 31.8129 32.8237 31.8104C32.8316 31.8054 32.8464 31.7997 32.8668 31.7997C32.8873 31.7997 32.9021 31.8054 32.91 31.8104C32.914 31.8129 32.9238 31.8191 32.9347 31.8446L33.7162 31.5119L32.9347 31.8446L33.5133 33.2037C34.0622 34.4929 35.0853 35.522 36.3712 36.0784L37.9217 36.7493C37.9467 36.7601 37.9529 36.7699 37.9555 36.7741C37.9605 36.782 37.9661 36.7968 37.9661 36.817C37.9661 36.8372 37.9605 36.8519 37.9555 36.8598C37.9529 36.864 37.9467 36.8738 37.9217 36.8846L36.3257 37.5752C35.072 38.1177 34.0669 39.11 33.5085 40.3567L32.9341 41.639C32.9233 41.6632 32.9136 41.6694 32.9091 41.6722C32.9011 41.6772 32.8865 41.6826 32.8668 41.6826C32.8472 41.6826 32.8326 41.6772 32.8246 41.6722C32.8201 41.6694 32.8104 41.6632 32.7995 41.639L32.2252 40.3567Z"
            strokeWidth="1.69867"
            fill={color}
            {...fadeInAfterAnimationComplete}
          />
          <animated.path
            d="M36.4918 14.8193C35.9334 13.5727 34.9283 12.5803 33.6746 12.0379L32.0786 11.3473C32.0536 11.3364 32.0474 11.3267 32.0448 11.3225C32.0398 11.3146 32.0342 11.2998 32.0342 11.2796C32.0342 11.2594 32.0398 11.2447 32.0448 11.2367C32.0474 11.2326 32.0536 11.2228 32.0786 11.2119L33.629 10.5411C34.915 9.98466 35.9381 8.95555 36.4869 7.66637L37.0656 6.3072C37.0765 6.2817 37.0863 6.27554 37.0903 6.27301C37.0982 6.26808 37.113 6.26234 37.1334 6.26234C37.1539 6.26234 37.1687 6.26808 37.1766 6.27301C37.1806 6.27554 37.1904 6.28171 37.2013 6.3072L37.9828 5.9745L37.2013 6.3072L37.78 7.66636C38.3288 8.95555 39.3519 9.98467 40.6379 10.5411L42.1883 11.2119C42.2133 11.2228 42.2195 11.2326 42.2221 11.2367C42.2271 11.2447 42.2327 11.2594 42.2327 11.2796C42.2327 11.2998 42.2271 11.3146 42.2221 11.3225C42.2195 11.3267 42.2133 11.3364 42.1883 11.3473L40.5923 12.0379C39.3386 12.5803 38.3335 13.5727 37.7751 14.8193L37.2007 16.1017C37.1899 16.1258 37.1802 16.1321 37.1757 16.1349C37.1677 16.1398 37.1531 16.1452 37.1334 16.1452C37.1138 16.1452 37.0992 16.1398 37.0912 16.1349C37.0867 16.1321 37.077 16.1258 37.0661 16.1017L36.4918 14.8193Z"
            strokeWidth="1.69867"
            fill={color}
            {...fadeInAfterAnimationComplete}
          />
          <animated.path
            d="M14.462 32.2294L16.4849 36.561C16.8157 37.2694 17.8223 37.2715 18.156 36.5645L20.2222 32.1878C21.3481 29.8027 23.2882 27.8976 25.6934 26.8153L30.0961 24.834C30.8218 24.5075 30.8218 23.4771 30.0961 23.1505L25.6821 21.1642C23.2838 20.0849 21.3476 18.1875 20.2202 15.8114L18.1552 11.4594C17.8208 10.7546 16.8171 10.7567 16.4857 11.4628L14.4641 15.7697C13.3368 18.1713 11.385 20.0886 8.96357 21.1728L4.54828 23.1498C3.82048 23.4757 3.82048 24.5089 4.54828 24.8347L8.95233 26.8067C11.3805 27.8939 13.3363 29.8188 14.462 32.2294Z"
            strokeWidth="2.49867"
            fill={color}
            {...fadeInAfterAnimationComplete}
          />
        </>
      )}
    </animated.svg>
  );
};

export default AnimatedGlitterIcon;
