import type { TIllustrationAssetProps } from "../helper";
import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";

export function UpdateHorizontalStackIllustration({
  className,
}: TIllustrationAssetProps) {
  return (
    <svg
      width="72"
      height="81"
      viewBox="0 0 72 81"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <g opacity="0.2">
        <path
          d="M42.4559 2.91759C41.655 2.51021 40.6262 2.54473 39.5076 3.11092L8.67113 18.8261C6.1371 20.1172 4.0795 23.6663 4.0795 26.7458V64.2729C4.0795 65.9922 4.71473 67.2005 5.71591 67.7184L2.63642 66.151C1.63523 65.6401 1 64.4248 1 62.7055V25.1784C1 22.092 3.0576 18.5499 5.59163 17.2587L36.4281 1.54355C37.5536 0.970462 38.5824 0.942844 39.3764 1.35022L42.4559 2.91759Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
          strokeWidth="0.35"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M42.4558 2.91754C43.457 3.42849 44.0922 4.64374 44.0922 6.36301V43.8901C44.0922 46.9766 42.0346 50.5187 39.5005 51.8099L8.66409 67.525C7.53862 68.0981 6.5098 68.1257 5.71576 67.7183C4.71458 67.2074 4.07935 65.9922 4.07935 64.2729V26.7457C4.07935 23.6593 6.13695 20.1172 8.67098 18.826L39.5075 3.11088C40.6329 2.53778 41.6617 2.51017 42.4558 2.91754Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
          strokeWidth="0.35"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <g opacity="0.6">
        <path
          d="M55.9132 8.904C55.1123 8.49662 54.0835 8.53114 52.9649 9.09733L22.1284 24.8125C19.5944 26.1036 17.5368 29.6527 17.5368 32.7322V70.2593C17.5368 71.9786 18.172 73.1869 19.1732 73.7048L16.0937 72.1374C15.0925 71.6265 14.4573 70.4112 14.4573 68.692V31.1648C14.4573 28.0784 16.5149 24.5363 19.0489 23.2451L49.8854 7.52994C51.0109 6.95685 52.0397 6.92923 52.8337 7.33661L55.9132 8.904Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
          strokeWidth="0.35"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M55.913 8.90393C56.9142 9.41488 57.5495 10.6301 57.5495 12.3494V49.8765C57.5495 52.9629 55.4918 56.5051 52.9578 57.7962L22.1213 73.5114C20.9959 74.0845 19.9671 74.1121 19.173 73.7047C18.1719 73.1938 17.5366 71.9785 17.5366 70.2593V32.7321C17.5366 29.6457 19.5942 26.1036 22.1283 24.8124L52.9647 9.09726C54.0902 8.52417 55.119 8.49655 55.913 8.90393Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
          strokeWidth="0.35"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M69.3636 14.8489C68.5627 14.4415 67.5339 14.476 66.4153 15.0422L35.5788 30.7573C33.0448 32.0485 30.9872 35.5975 30.9872 38.6771V76.2042C30.9872 77.9235 31.6225 79.1318 32.6236 79.6497L29.5441 78.0823C28.5429 77.5713 27.9077 76.3561 27.9077 74.6368V37.1097C27.9077 34.0233 29.9653 30.4812 32.4994 29.19L63.3358 13.4748C64.4613 12.9017 65.4901 12.8741 66.2842 13.2815L69.3636 14.8489Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.35"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M69.3635 14.8489C70.3646 15.3598 70.9999 16.5751 70.9999 18.2943V55.8215C70.9999 58.9079 68.9423 62.45 66.4083 63.7412L35.5718 79.4563C34.4463 80.0294 33.4175 80.0571 32.6235 79.6497C31.6223 79.1387 30.9871 77.9235 30.9871 76.2042V38.6771C30.9871 35.5907 33.0446 32.0485 35.5787 30.7574L66.4152 15.0422C67.5406 14.4691 68.5694 14.4415 69.3635 14.8489Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.35"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M48.6497 44.3459C51.1699 39.1121 55.1125 34.5688 59.5454 32.3109C59.9113 32.1245 60.2013 32.3317 60.2013 32.7736C60.2013 38.1661 58.1161 44.0213 54.8708 48.7442C55.3887 52.4037 53.1861 57.2163 49.9616 59.4879C49.6509 59.702 49.3402 59.8953 49.0295 60.0541C48.6635 60.2405 48.3735 60.0334 48.3735 59.5915V55.1863C47.5242 54.7996 46.7509 54.2541 46.0812 53.5637L42.4631 55.4072C42.0971 55.5937 41.8071 55.3865 41.8071 54.9446C41.8071 50.9675 44.4516 46.3966 47.7176 44.7325C48.0283 44.5737 48.339 44.4425 48.6497 44.3459ZM53.628 40.9211C52.5371 41.4735 51.6602 42.9994 51.6602 44.3251C51.6602 45.6509 52.544 46.2723 53.628 45.7199C54.712 45.1675 55.5958 43.6416 55.5958 42.3159C55.5958 40.9902 54.712 40.3687 53.628 40.9211Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
      />
      <path
        d="M45.0936 56.4499C45.3835 56.0356 45.4457 55.5039 45.2247 55.2622C45.0107 55.0206 44.5964 55.1587 44.3064 55.566C42.9393 57.5063 42.2419 59.916 42.5112 61.8355C42.5526 62.1601 42.7736 62.312 43.0567 62.2222C44.7414 61.6836 46.44 59.9782 47.455 57.7963C47.6759 57.3337 47.6207 56.8572 47.3376 56.7329C47.0476 56.6087 46.6402 56.8849 46.4192 57.3475C46.4192 57.3544 46.4123 57.3682 46.4054 57.3751C45.784 58.7077 44.8104 59.7986 43.7678 60.3303C43.7678 59.0184 44.2857 57.5891 45.0936 56.4499Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
      />
    </svg>
  );
}