text: /**
   * @param {number} value
   */
  const calculateCircleProgress = (value) => {
    const radius = 40;
    const c = Math.PI * (radius * 2);
  
    if (value < 0) value = 0;
    if (value > 100) value = 100;
  
    return ((100 - value) / 100) * c;
  };
  
  /**
   *
   * @param {{progress: number}} param0
   * @returns
   */
  const getProgressAnimation = ({ progress }) => {
    return `
      @keyframes rankAnimation {
        from {
          stroke-dashoffset: ${calculateCircleProgress(0)};
        }
        to {
          stroke-dashoffset: ${calculateCircleProgress(progress)};
        }
      }
    `;
  };
  
  const getAnimations = () => {
    return `
      /* Animations */
      @keyframes scaleInAnimation {
        from {
          transform: translate(-5px, 5px) scale(0);
        }
        to {
          transform: translate(-5px, 5px) scale(1);
        }
      }
      @keyframes fadeInAnimation {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    `;
  };
  
  /**
   * @param {{
   *  titleColor: string;
   *  textColor: string;
   *  iconColor: string;
   *  show_icons: boolean;
   *  progress: number;
   * }} args
   */
  const getStyles = ({
    titleColor,
    textColor,
    iconColor,
    show_icons,
    progress,
  }) => {
    return `
      .stat {
        font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
      }
      @supports(-moz-appearance: auto) {
        /* Selector detects Firefox */
        .stat { font-size:12px; }
      }
      .stagger {
        opacity: 0;
        animation: fadeInAnimation 0.3s ease-in-out forwards;
      }
      .rank-text {
        font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; 
        animation: scaleInAnimation 0.3s ease-in-out forwards;
      }
      
      .bold { font-weight: 700 }
      .icon {
        fill: ${iconColor};
        display: ${!!show_icons ? "block" : "none"};
      }
      
      .rank-circle-rim {
        stroke: ${titleColor};
        fill: none;
        stroke-width: 6;
        opacity: 0.2;
      }
      .rank-circle {
        stroke: ${titleColor};
        stroke-dasharray: 250;
        fill: none;
        stroke-width: 6;
        stroke-linecap: round;
        opacity: 0.8;
        transform-origin: -10px 8px;
        transform: rotate(-90deg);
        animation: rankAnimation 1s forwards ease-in-out;
      }
      ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })}
    `;
  };
  
  module.exports = { getStyles, getAnimations };
  