const ConfirmationIllustration = () => (
  <svg
    viewBox="0 0 160 130"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
    className="tmpl-dialog-box__svg-icon"
  >
    <defs>
      <linearGradient id="tmpl-confirm-grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#5A8FD8" />
        <stop offset="1" stopColor="#2E5FB5" />
      </linearGradient>
      <linearGradient id="tmpl-confirm-ring" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#E5EEF9" />
        <stop offset="1" stopColor="#D4E1F1" />
      </linearGradient>
    </defs>

    <ellipse cx="80" cy="120" rx="48" ry="3.5" fill="#000" opacity="0.10" />

    <circle cx="80" cy="58" r="55" fill="url(#tmpl-confirm-ring)" opacity="0.55" />

    <circle
      cx="80"
      cy="58"
      r="42"
      fill="url(#tmpl-confirm-grad)"
      stroke="#214EA0"
      strokeWidth="0.8"
    />

    <ellipse cx="66" cy="38" rx="20" ry="10" fill="#FFFFFF" opacity="0.22" />

    <path
      d="M66 48 Q66 32 80 32 Q94 32 94 46 Q94 55 84 60 Q80 62 80 70"
      stroke="#FFFFFF"
      strokeWidth="7"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />

    <circle cx="80" cy="84" r="4.5" fill="#FFFFFF" />

    <circle cx="132" cy="30" r="2.6" fill="#5A8FD8" />
    <circle cx="138" cy="48" r="1.8" fill="#5A8FD8" opacity="0.6" />
    <circle cx="28" cy="40" r="2" fill="#5A8FD8" opacity="0.6" />
    <circle cx="22" cy="68" r="1.5" fill="#5A8FD8" opacity="0.5" />
  </svg>
);

export default ConfirmationIllustration;