import React from "react";
import Icon from "@ant-design/icons";

const FailedTransactionSvg = () => {
  return (
    <svg
      width="77"
      height="77"
      viewBox="0 0 77 77"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle opacity="0.1" cx="38.5" cy="38.5" r="38.5" fill="#FC5D5D" />
      <path
        d="M52.335 39.7937C51.4425 40.665 50.9325 41.9187 51.06 43.2575C51.2512 45.5525 53.355 47.2312 55.65 47.2312H59.6875V49.76C59.6875 54.1587 56.0963 57.75 51.6975 57.75H30.2138C30.8725 57.1975 31.4462 56.5175 31.8925 55.7525C32.6787 54.4775 33.125 52.9688 33.125 51.375C33.125 46.6787 29.3213 42.875 24.625 42.875C22.6275 42.875 20.7787 43.5763 19.3125 44.745V35.4588C19.3125 31.06 22.9037 27.4688 27.3025 27.4688H51.6975C56.0963 27.4688 59.6875 31.06 59.6875 35.4588V38.5188H55.395C54.205 38.5188 53.1213 38.9862 52.335 39.7937Z"
        stroke="#2C3489"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M19.3125 37.371V27.6599C19.3125 25.1311 20.8638 22.8785 23.2225 21.986L40.095 15.611C42.73 14.6123 45.5562 16.5674 45.5562 19.3936V27.4686"
        stroke="#2C3489"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M61.9375 40.6869V45.0646C61.9375 46.2333 61.0025 47.1895 59.8125 47.232H55.6475C53.3525 47.232 51.2487 45.5532 51.0575 43.2582C50.93 41.9195 51.44 40.6657 52.3325 39.7945C53.1187 38.987 54.2025 38.5195 55.3925 38.5195H59.8125C61.0025 38.562 61.9375 39.5182 61.9375 40.6869Z"
        stroke="#2C3489"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M28.875 36.5H43.75"
        stroke="#2C3489"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M33.125 51.375C33.125 52.9688 32.6787 54.4775 31.8925 55.7525C31.4462 56.5175 30.8725 57.1975 30.2138 57.75C28.7263 59.0887 26.7712 59.875 24.625 59.875C21.5225 59.875 18.8238 58.2175 17.3575 55.7525C16.5713 54.4775 16.125 52.9688 16.125 51.375C16.125 48.6975 17.3575 46.2963 19.3125 44.745C20.7787 43.5763 22.6275 42.875 24.625 42.875C29.3213 42.875 33.125 46.6787 33.125 51.375Z"
        stroke="#FC5D5D"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M26.8987 53.5853L22.3937 49.1016"
        stroke="#FC5D5D"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M26.8562 49.165L22.3512 53.6488"
        stroke="#FC5D5D"
        strokeWidth="1.5"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

const FailedTransactionIcon = () => <Icon component={FailedTransactionSvg} />;

export default FailedTransactionIcon;