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

export function TokenHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
  return (
    <svg
      width="81"
      height="92"
      viewBox="0 0 81 92"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <g opacity="0.2">
        <path
          d="M47.6235 2.3563C46.7082 1.89077 45.5326 1.93022 44.2543 2.57724L9.01615 20.5358C6.1204 22.0113 3.76908 26.067 3.76908 29.5862V72.4706C3.76908 74.4353 4.49499 75.8161 5.63909 76.4079L2.12001 74.6168C0.97591 74.0329 0.25 72.6442 0.25 70.6795V27.795C0.25 24.268 2.60132 20.2202 5.49706 18.7447L40.7431 0.78611C42.0293 0.131205 43.2049 0.0996434 44.1123 0.565178L47.6314 2.3563H47.6235Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M47.6235 2.35583C48.7676 2.93972 49.4935 4.32843 49.4935 6.29315V49.1776C49.4935 52.7046 47.1422 56.7524 44.2465 58.2279L9.00828 76.1865C7.72216 76.8414 6.5465 76.873 5.63911 76.4075C4.49501 75.8236 3.7691 74.4348 3.7691 72.4701V29.5857C3.7691 26.0587 6.12042 22.0109 9.01617 20.5354L44.2544 2.57676C45.5405 1.92185 46.7161 1.89029 47.6235 2.35583Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <g opacity="0.6">
        <path
          d="M63.0017 9.1959C62.0865 8.73037 60.9108 8.76982 59.6326 9.41684L24.3944 27.3754C21.4986 28.851 19.1473 32.9066 19.1473 36.4258V79.3102C19.1473 81.2749 19.8732 82.6558 21.0173 83.2475L17.4982 81.4564C16.3541 80.8725 15.6282 79.4838 15.6282 77.5191V34.6346C15.6282 31.1076 17.9796 27.0598 20.8753 25.5843L56.1135 7.62571C57.3996 6.9708 58.5753 6.93924 59.4826 7.40478L63.0017 9.1959Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M63.0018 9.19543C64.1458 9.77932 64.8718 11.168 64.8718 13.1327V56.0172C64.8718 59.5442 62.5204 63.592 59.6247 65.0675L24.3865 83.0261C23.1004 83.681 21.9247 83.7126 21.0173 83.2471C19.8732 82.6632 19.1473 81.2744 19.1473 79.3097V36.4253C19.1473 32.8983 21.4987 28.8505 24.3944 27.375L59.6326 9.41636C60.9187 8.76145 62.0944 8.72989 63.0018 9.19543Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M78.38 15.9911C77.4647 15.5255 76.289 15.565 75.0108 16.212L39.7726 34.1706C36.8769 35.6461 34.5256 39.7018 34.5256 43.2209V86.1054C34.5256 88.0701 35.2515 89.4509 36.3956 90.0427L32.8765 88.2516C31.7324 87.6677 31.0065 86.279 31.0065 84.3142V41.4298C31.0065 37.9028 33.3578 33.855 36.2535 32.3795L71.4917 14.4209C72.7778 13.766 73.9535 13.7344 74.8609 14.1999L78.38 15.9911Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M78.38 15.9905C79.5241 16.5744 80.25 17.9631 80.25 19.9278V62.8122C80.25 66.3393 77.8987 70.3871 75.0029 71.8626L39.7647 89.8212C38.4786 90.4761 37.303 90.5076 36.3956 90.0421C35.2515 89.4582 34.5256 88.0695 34.5256 86.1048V43.2203C34.5256 39.6933 36.8769 35.6455 39.7726 34.17L75.0108 16.2114C76.2969 15.5565 77.4726 15.5249 78.38 15.9905Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M53.1704 71.7917L50.18 73.3146C49.0832 73.8748 48.1837 73.2436 48.1837 71.9022V69.2668C48.1837 68.2884 48.4993 67.2153 49.0595 66.2448L55.4349 55.2376C55.072 53.699 55.1351 51.829 55.6164 49.8958C56.9735 44.4672 61.2501 39.7724 65.1479 39.441C67.0337 39.2832 68.5565 40.1511 69.4245 41.9028C70.2924 43.6466 70.4108 46.0611 69.7559 48.6886C68.4697 53.841 64.564 58.3228 60.8398 59.0566L60.4453 59.7273C59.8772 60.7057 59.1276 61.4632 58.3307 61.8735L58.1571 61.9603V63.1754C58.1571 64.5168 57.2655 66.0633 56.1608 66.6235L55.1666 67.1285V68.3436C55.1666 69.685 54.275 71.2315 53.1704 71.7917ZM62.694 42.613C60.4216 43.7728 58.2912 46.5818 57.5101 49.738C57.1077 51.3634 57.1077 52.9178 57.5101 54.133C57.6363 54.5117 57.5416 55.0404 57.2734 55.5138L50.4719 67.2469C50.2825 67.5704 50.18 67.9333 50.18 68.2568V70.8922L53.1704 69.3694V68.1543C53.1704 66.8129 54.062 65.2664 55.1666 64.7061L56.1608 64.2012V62.986C56.1608 61.6447 57.0524 60.0981 58.1571 59.5379L58.3307 59.4511C58.5911 59.317 58.8514 59.0566 59.0329 58.7331L59.8456 57.3286C60.1139 56.8631 60.5163 56.5474 60.8792 56.5159C63.7355 56.2713 66.868 52.8311 67.8622 48.8464C68.3435 46.9132 68.2567 45.1458 67.6176 43.8675C66.9785 42.5893 65.8659 41.9423 64.4851 42.0685C63.8933 42.1159 63.2858 42.3052 62.6861 42.613H62.694Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        d="M63.6488 47.0309C63.9249 46.8889 64.1459 47.0467 64.1459 47.386C64.1459 47.7253 63.9249 48.104 63.6488 48.246C63.3726 48.3881 63.1517 48.2303 63.1517 47.891C63.1517 47.5517 63.3726 47.1729 63.6488 47.0309Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        d="M63.6487 49.4605C62.8202 49.8787 62.1495 49.4053 62.1495 48.4032C62.1495 47.4011 62.8202 46.2413 63.6487 45.8231C64.4772 45.4049 65.1479 45.8783 65.1479 46.8804C65.1479 47.8825 64.4772 49.0424 63.6487 49.4605ZM63.6487 47.0303C63.3725 47.1723 63.1516 47.559 63.1516 47.8904C63.1516 48.2217 63.3725 48.3796 63.6487 48.2454C63.9249 48.1113 64.1458 47.7168 64.1458 47.3854C64.1458 47.054 63.9249 46.8962 63.6487 47.0303Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
    </svg>
  );
}