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

export function StateHorizontalStackIllustration({
  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="M41.5768 1.96789C40.776 1.56055 39.7473 1.59509 38.6288 2.16123L7.7954 17.8747C5.26161 19.1658 3.20422 22.7145 3.20422 25.7937V63.3172C3.20422 65.0363 3.83936 66.2445 4.84045 66.7623L1.76125 65.195C0.760168 64.6841 0.125 63.469 0.125 61.7499V24.2265C0.125 21.1404 2.1824 17.5986 4.71618 16.3076L35.5496 0.593996C36.675 0.0209607 37.7037 -0.00667566 38.4976 0.400663L41.5768 1.96789Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.25"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M41.5769 1.9678C42.578 2.4787 43.2132 3.6938 43.2132 5.41291V42.9363C43.2132 46.0224 41.1557 49.5642 38.622 50.8552L7.78855 66.5688C6.6632 67.1419 5.63448 67.1695 4.84052 66.7622C3.83943 66.2513 3.20428 65.0362 3.20428 63.3171V25.7936C3.20428 22.7075 5.26168 19.1657 7.79546 17.8746L38.6289 2.16113C39.7542 1.5881 40.7829 1.56046 41.5769 1.9678Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.25"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <g opacity="0.6">
        <path
          d="M55.0328 7.91223C54.2319 7.50489 53.2032 7.53943 52.0847 8.10556L21.2513 23.8192C18.7175 25.1102 16.6601 28.6589 16.6601 31.7381V69.2615C16.6601 70.9806 17.2953 72.1888 18.2964 72.7066L15.2172 71.1394C14.2161 70.6285 13.5809 69.4134 13.5809 67.6943V30.1708C13.5809 27.0847 15.6383 23.543 18.1721 22.2519L49.0055 6.53833C50.1309 5.9653 51.1596 5.93766 51.9536 6.345L55.0328 7.91223Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.25"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M55.0328 7.91214C56.0339 8.42304 56.6691 9.63814 56.6691 11.3572V48.8807C56.6691 51.9668 54.6117 55.5085 52.0779 56.7996L21.2444 72.5132C20.1191 73.0862 19.0904 73.1138 18.2965 72.7065C17.2954 72.1956 16.6602 70.9805 16.6602 69.2614V31.738C16.6602 28.6519 18.7176 25.1101 21.2514 23.8191L52.0848 8.10547C53.2101 7.53244 54.2388 7.5048 55.0328 7.91214Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.25"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M68.4888 13.8636C67.6879 13.4563 66.6592 13.4908 65.5408 14.057L34.7073 29.7706C32.1735 31.0616 30.1161 34.6103 30.1161 37.6895V75.2129C30.1161 76.932 30.7513 78.1402 31.7524 78.658L28.6732 77.0908C27.6721 76.5799 27.0369 75.3648 27.0369 73.6457V36.1223C27.0369 33.0361 29.0943 29.4944 31.6281 28.2033L62.4615 12.4897C63.5869 11.9167 64.6156 11.8891 65.4096 12.2964L68.4888 13.8636Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M68.4888 13.8636C69.4899 14.3745 70.1251 15.5896 70.1251 17.3087V54.8321C70.1251 57.9182 68.0677 61.4599 65.5339 62.751L34.7005 78.4646C33.5751 79.0376 32.5464 79.0653 31.7525 78.6579C30.7514 78.147 30.1162 76.9319 30.1162 75.2128V37.6894C30.1162 34.6033 32.1736 31.0615 34.7074 29.7705L65.5408 14.0569C66.6662 13.4839 67.6949 13.4562 68.4888 13.8636Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M51.1114 32.8219C44.3661 36.2601 38.905 45.6979 38.905 53.8999C38.905 62.1019 44.373 65.9682 51.1114 62.5369C57.8566 59.0987 63.3177 49.6609 63.3177 41.4589C63.3177 33.2569 57.8497 29.3906 51.1114 32.8219ZM46.0852 53.5065L43.9381 56.0057C43.3236 54.9287 42.9784 53.5133 42.9784 51.8287C42.9784 50.1441 43.3236 48.3698 43.9381 46.6714L46.0852 46.9821C45.6572 48.1696 45.4155 49.4054 45.4155 50.5929C45.4155 51.7804 45.6572 52.7607 46.0852 53.5202V53.5065ZM51.1114 57.5798C49.7236 58.284 48.4188 58.5325 47.2727 58.3737L48.4257 55.1703C49.2265 55.2807 50.131 55.1151 51.1114 54.618C52.0917 54.1209 53.0031 53.3614 53.797 52.4363L54.95 54.466C53.8108 55.7916 52.4991 56.8825 51.1114 57.5867V57.5798ZM53.797 40.1885C53.0031 40.0781 52.0917 40.2437 51.1114 40.7408C50.131 41.2379 49.2265 41.9974 48.4257 42.9225L47.2727 40.8928C48.4119 39.5672 49.7236 38.4763 51.1114 37.7721C52.4991 37.0679 53.8039 36.8193 54.95 36.9781L53.797 40.1816V40.1885ZM58.2984 48.6874L56.1444 48.3836C56.5724 47.1961 56.8141 45.9603 56.8141 44.7728C56.8141 43.5853 56.5724 42.5981 56.1444 41.8455L58.2984 39.3463C58.906 40.4233 59.2581 41.8386 59.2581 43.5301C59.2581 45.2147 58.9129 46.989 58.2984 48.6874Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
    </svg>
  );
}