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

export function TemplateHorizontalStackIllustration({ 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.6283 2.38547C46.7129 1.91347 45.5371 1.95349 44.2588 2.60949L9.01704 20.8175C6.12099 22.3135 3.76943 26.4255 3.76943 29.9935V73.4734C3.76943 75.4654 4.49542 76.8654 5.63964 77.4654L2.12019 75.6494C0.975979 75.0574 0.25 73.6494 0.25 71.6574V28.1774C0.25 24.6014 2.60155 20.4975 5.49759 19.0015L40.7393 0.793477C42.0256 0.129478 43.2014 0.0975032 44.1088 0.569503L47.6283 2.38547Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M47.6284 2.3851C48.7726 2.97709 49.4986 4.38509 49.4986 6.37708V49.8571C49.4986 53.4331 47.147 57.537 44.251 59.033L9.00923 77.241C7.72298 77.905 6.54721 77.9371 5.63973 77.4651C4.49552 76.8731 3.76953 75.4651 3.76953 73.4731V29.9931C3.76953 26.4171 6.12109 22.3131 9.01713 20.8171L44.2589 2.60912C45.5451 1.94512 46.7209 1.9131 47.6284 2.3851Z"
          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.0087 9.32146C62.0933 8.84946 60.9175 8.88944 59.6391 9.54544L24.3974 27.7534C21.5014 29.2494 19.1498 33.3614 19.1498 36.9294V80.4094C19.1498 82.4014 19.8758 83.8014 21.02 84.4014L17.5006 82.5854C16.3564 81.9934 15.6304 80.5854 15.6304 78.5934V35.1134C15.6304 31.5374 17.9819 27.4334 20.878 25.9374L56.1197 7.72942C57.406 7.06542 58.5817 7.03345 59.4892 7.50545L63.0087 9.32146Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M63.0083 9.32185C64.1525 9.91385 64.8785 11.3218 64.8785 13.3138V56.7938C64.8785 60.3698 62.5269 64.4738 59.6309 65.9698L24.3891 84.1777C23.1029 84.8417 21.9271 84.8738 21.0196 84.4018C19.8754 83.8098 19.1494 82.4018 19.1494 80.4098V36.9298C19.1494 33.3538 21.501 29.2498 24.397 27.7538L59.6388 9.54583C60.925 8.88183 62.1008 8.84985 63.0083 9.32185Z"
          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.3797 16.2097C77.4644 15.7377 76.2886 15.7777 75.0102 16.4337L39.7685 34.6417C36.8725 36.1377 34.5209 40.2497 34.5209 43.8177V87.2976C34.5209 89.2896 35.2469 90.6896 36.3911 91.2896L32.8717 89.4737C31.7274 88.8817 31.0015 87.4736 31.0015 85.4816V42.0017C31.0015 38.4257 33.353 34.3217 36.2491 32.8257L71.4908 14.6177C72.7771 13.9537 73.9528 13.9217 74.8603 14.3937L78.3797 16.2097Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M78.3798 16.2093C79.5241 16.8013 80.25 18.2093 80.25 20.2013V63.6813C80.25 67.2573 77.8985 71.3613 75.0024 72.8573L39.7607 91.0653C38.4744 91.7293 37.2987 91.7613 36.3912 91.2893C35.247 90.6973 34.521 89.2893 34.521 87.2973V43.8173C34.521 40.2413 36.8726 36.1373 39.7686 34.6413L75.0103 16.4333C76.2966 15.7693 77.4724 15.7373 78.3798 16.2093Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M59.134 41.369L55.4489 50.497L62.7798 46.713L59.134 41.377V41.369ZM59.063 38.185C59.4023 37.993 59.7338 37.913 60.0336 37.953C60.3335 37.993 60.586 38.145 60.7675 38.393L60.7833 38.409L65.0287 44.617C65.2181 44.873 65.3365 45.225 65.3523 45.633C65.3759 46.057 65.297 46.537 65.1392 47.009C64.9735 47.481 64.7288 47.937 64.4211 48.329C64.1133 48.713 63.7661 49.017 63.411 49.201L54.8965 53.601C54.5493 53.793 54.2021 53.873 53.9022 53.825C53.5866 53.777 53.3183 53.601 53.1447 53.305C52.9632 53.017 52.8764 52.625 52.8843 52.177C52.8922 51.729 53.0026 51.249 53.192 50.777L57.4611 40.209C57.6268 39.777 57.8557 39.369 58.1319 39.017C58.416 38.649 58.7474 38.361 59.0867 38.169L59.063 38.185Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M47.6289 63.0411C47.6289 61.4731 48.6548 59.6732 49.9252 59.0172L55.67 56.0492C56.9404 55.3932 57.9663 56.1292 57.9663 57.6971V64.7851C57.9663 66.3531 56.9404 68.1532 55.67 68.8092L49.9252 71.7771C48.6548 72.4331 47.6289 71.6971 47.6289 70.1291V63.0411ZM55.67 58.8811L49.9252 61.8491V68.9371L55.67 65.9692V58.8811Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M65.4387 53.8327C63.8526 54.6487 62.5663 56.9047 62.5663 58.8647C62.5663 60.8247 63.8526 61.7447 65.4387 60.9287C67.0248 60.1127 68.3111 57.8567 68.3111 55.8967C68.3111 53.9367 67.0248 53.0167 65.4387 53.8327ZM60.27 60.0487C60.27 56.5287 62.5821 52.4727 65.4387 50.9927C68.2953 49.5207 70.6074 51.1767 70.6074 54.7047C70.6074 58.2247 68.2953 62.2807 65.4387 63.7607C62.5821 65.2327 60.27 63.5767 60.27 60.0487Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
    </svg>
  );
}