import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo, useState } from "react";
import usePrefersReducedMotion from "./usePrefersReducedMotion";
import useRandomInterval from "./useRandomInterval";

// Taken and adapted from:
// https://www.joshwcomeau.com/react/animated-sparkles-in-react/

const spin = stylex.keyframes({
  "0%": {
    transform: "rotate(0deg)"
  },
  "100%": {
    transform: "rotate(180deg)"
  }
});
const comeInOut = stylex.keyframes({
  "0%": {
    transform: "scale(0)"
  },
  "50%": {
    transform: "scale(1)"
  },
  "100%": {
    transform: "scale(0)"
  }
});
const noPreference = "@media (prefers-reduced-motion: no-preference)";
const styles = stylex.create({
  wrapper: {
    display: "inline-block",
    position: "relative"
  },
  childWrapper: {
    position: "relative",
    zIndex: 1,
    fontWeight: 600
  },
  sparkleSvg: {
    display: "block",
    animationName: {
      [noPreference]: spin
    },
    animationTimingFunction: {
      [noPreference]: "linear"
    },
    animationDuration: {
      [noPreference]: "1000ms"
    }
  },
  sparkleWrapper: {
    display: "block",
    position: "absolute",
    animationName: {
      [noPreference]: comeInOut
    },
    animationDuration: {
      [noPreference]: "850ms"
    },
    animationFillMode: {
      [noPreference]: "forwards"
    }
  }
});
const DEFAULT_COLOR = "var(--t-subscription-color)";
const random = (min, max) => (Math.random() * (max - min) | 0) + min;
const generateSpark = color => ({
  id: String(random(10000, 99999)),
  createdAt: Date.now(),
  color,
  size: random(10, 20),
  style: {
    top: `${random(-50, 100)}%`,
    left: `${random(-10, 100)}%`
  }
});
export default memo(function Sparkles(props) {
  const $ = _c(14);
  const color = props.color ?? DEFAULT_COLOR;
  let t0;
  if ($[0] !== color) {
    t0 = () => [generateSpark(color), generateSpark(color), generateSpark(color)];
    $[0] = color;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const [sparkles, setSparkles] = useState(t0);
  const prefersReducedMotion = usePrefersReducedMotion();
  let t1;
  if ($[2] !== color || $[3] !== sparkles) {
    t1 = () => {
      const sparkle = generateSpark(color);
      const now = Date.now();
      const nextSparkles = sparkles.filter(sp => now - sp.createdAt < 1000);
      nextSparkles.push(sparkle);
      setSparkles(nextSparkles);
    };
    $[2] = color;
    $[3] = sparkles;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  useRandomInterval(t1, prefersReducedMotion ? null : 450, prefersReducedMotion ? null : 800);
  let t2;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = stylex.props(styles.wrapper);
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  let t3;
  if ($[6] !== sparkles) {
    t3 = sparkles.map(_temp);
    $[6] = sparkles;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  let t4;
  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = stylex.props(styles.childWrapper);
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  let t5;
  if ($[9] !== props.children) {
    t5 = <strong {...t4}>{props.children}</strong>;
    $[9] = props.children;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  let t6;
  if ($[11] !== t3 || $[12] !== t5) {
    t6 = <span {...t2}>{t3}{t5}</span>;
    $[11] = t3;
    $[12] = t5;
    $[13] = t6;
  } else {
    t6 = $[13];
  }
  return t6;
});
const Sparkle = memo(function Sparkle(t0) {
  const $ = _c(11);
  const {
    size,
    color,
    style
  } = t0;
  let t1;
  if ($[0] !== style) {
    t1 = stylex.props(styles.sparkleWrapper, style);
    $[0] = style;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = stylex.props(styles.sparkleSvg);
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  let t3;
  if ($[3] !== color) {
    t3 = <path d="M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z" fill={color} />;
    $[3] = color;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== size || $[6] !== t3) {
    t4 = <svg {...t2} width={size} height={size} viewBox="0 0 68 68" fill="none">{t3}</svg>;
    $[5] = size;
    $[6] = t3;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  let t5;
  if ($[8] !== t1 || $[9] !== t4) {
    t5 = <span {...t1}>{t4}</span>;
    $[8] = t1;
    $[9] = t4;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  return t5;
});
function _temp(sparkle_0) {
  return <Sparkle key={sparkle_0.id} color={sparkle_0.color} size={sparkle_0.size} style={sparkle_0.style} />;
}
//# sourceMappingURL=Sparkles.jsx.map