/**
 * Returns an inline SVG string for the SpeedCard pinwheel decorative
 * background. The two paths are filled with the provided color so callers
 * can theme the background dynamically (used by SimpleCard when
 * `showBackgroundImage` is enabled and a `pinwheelColor` is provided).
 *
 * Output is intended to be embedded as a `data:image/svg+xml;utf8,...`
 * `background-image`. Encode the result with `encodeURIComponent`.
 */
export const SpeedCardBg = (color: string = "#24A76A"): string => {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="684" height="107" viewBox="0 0 684 107" fill="none">
    <g clip-path="url(#clip0_12352_9042)">
      <path d="M154.09 -70.5605C173.769 -7.58032 204.79 24.8889 328.202 55.2823C444.619 83.9133 629.479 141.332 667.653 80.7015C691.679 45.2165 678.322 -5.62201 670.537 -46.3554C664.452 -73.1846 658.327 -97.1939 652.913 -123.475C651.135 -132.091 638.766 -131.974 637.067 -123.318C628.136 -77.6888 612.526 -44.9062 577.593 -22.4637C517.962 20.1889 377.954 -6.48361 303.148 -38.287C223.245 -70.7171 200.918 -132.366 195.425 -199.341C193.37 -235.257 198.467 -269.841 208.07 -299.569C210.915 -308.303 199.218 -314.178 193.844 -306.697C151.324 -247.751 137.69 -140.395 154.129 -70.5213" fill="${color}" />
      <path d="M167.605 -417.382C104.062 -397.877 71.302 -367.131 40.6368 -244.813C11.7499 -129.428 -46.182 53.7941 14.9903 91.6292C50.7927 115.443 102.086 102.204 143.183 94.4883C170.253 88.4567 194.476 82.3858 220.992 77.02C229.686 75.2574 229.568 62.9983 220.834 61.3141C174.797 52.4624 141.721 36.9915 119.078 2.36813C76.0441 -56.7345 102.955 -195.502 135.043 -269.645C167.763 -348.84 229.963 -370.969 297.537 -376.414C333.774 -378.45 368.667 -373.398 398.661 -363.88C407.473 -361.06 413.401 -372.654 405.853 -377.98C346.38 -420.124 238.064 -433.636 167.565 -417.343" fill="${color}" />
    </g>
    <defs>
      <clipPath id="clip0_12352_9042">
        <rect width="684" height="107" fill="white" />
      </clipPath>
    </defs>
  </svg>`;
};

export default SpeedCardBg;