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

export function WorkItemHorizontalStackIllustration({
  className,
}: TIllustrationAssetProps) {
  return (
    <svg
      width="71"
      height="80"
      viewBox="0 0 71 80"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <g opacity="0.2">
        <path
          d="M41.6017 1.99291C40.8009 1.58558 39.7722 1.6201 38.6537 2.18623L7.82029 17.8998C5.2865 19.1909 3.22911 22.7395 3.22911 25.8187V63.3422C3.22911 65.0613 3.86427 66.2695 4.86536 66.7873L1.78616 65.2201C0.78507 64.7092 0.149902 63.494 0.149902 61.7749V24.2515C0.149902 21.1654 2.2073 17.6237 4.74108 16.3326L35.5745 0.619008C36.6999 0.0459728 37.7286 0.0183575 38.5225 0.425696L41.6017 1.99291Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.3"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M41.6014 1.99296C42.6025 2.50385 43.2376 3.71897 43.2376 5.43807V42.9615C43.2376 46.0476 41.1802 49.5894 38.6465 50.8804L7.81304 66.594C6.68768 67.167 5.65898 67.1946 4.86501 66.7873C3.86393 66.2764 3.22876 65.0613 3.22876 63.3422V25.8188C3.22876 22.7327 5.28616 19.1909 7.81994 17.8998L38.6534 2.18627C39.7787 1.61323 40.8074 1.58562 41.6014 1.99296Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.3"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <g opacity="0.6">
        <path
          d="M55.0575 7.93732C54.2567 7.52998 53.228 7.5645 52.1095 8.13063L21.2761 23.8442C18.7423 25.1353 16.6849 28.6839 16.6849 31.7631V69.2866C16.6849 71.0057 17.3201 72.2139 18.3212 72.7317L15.242 71.1645C14.2409 70.6536 13.6057 69.4385 13.6057 67.7194V30.1959C13.6057 27.1098 15.6631 23.5681 18.1969 22.277L49.0303 6.5634C50.1557 5.99037 51.1844 5.96275 51.9783 6.37009L55.0575 7.93732Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.3"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M55.0574 7.93729C56.0585 8.44819 56.6937 9.66329 56.6937 11.3824V48.9058C56.6937 51.9919 54.6363 55.5337 52.1025 56.8248L21.2691 72.5384C20.1437 73.1114 19.115 73.139 18.3211 72.7317C17.32 72.2208 16.6848 71.0056 16.6848 69.2865V31.7631C16.6848 28.677 18.7422 25.1352 21.276 23.8442L52.1094 8.1306C53.2348 7.55757 54.2635 7.52995 55.0574 7.93729Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.3"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M68.5136 13.8817C67.7127 13.4744 66.684 13.5089 65.5656 14.075L34.7322 29.7886C32.1984 31.0797 30.141 34.6283 30.141 37.7075V75.231C30.141 76.9501 30.7761 78.1583 31.7772 78.6761L28.698 77.1089C27.6969 76.598 27.0618 75.3828 27.0618 73.6637V36.1403C27.0618 33.0542 29.1192 29.5124 31.653 28.2214L62.4864 12.5078C63.6117 11.9348 64.6404 11.9072 65.4344 12.3145L68.5136 13.8817Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M68.5135 13.8817C69.5146 14.3926 70.1497 15.6077 70.1497 17.3268V54.8502C70.1497 57.9363 68.0924 61.4781 65.5586 62.7692L34.7251 78.4827C33.5998 79.0558 32.5711 79.0834 31.7771 78.6761C30.776 78.1652 30.1409 76.9501 30.1409 75.231V37.7075C30.1409 34.6214 32.1983 31.0796 34.732 29.7886L65.5655 14.075C66.6908 13.502 67.7195 13.4744 68.5135 13.8817Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M52.6893 39.9859C52.8757 40.4071 53.2899 40.559 53.7801 40.3173C54.4429 39.9859 54.9883 39.0401 54.9952 38.2047V36.672C55.009 36.1749 54.8157 35.8021 54.4843 35.6847C54.1598 35.5673 53.7387 35.7192 53.3659 36.0851L45.5367 43.8384C45.0741 44.3009 44.7634 45.0121 44.7634 45.6403V56.1897C44.7634 56.7144 44.9844 57.0941 45.3434 57.1839C45.7024 57.2736 46.1511 57.0596 46.524 56.6316L47.6424 55.3336C48.2293 54.6501 48.4571 53.6214 48.1533 53.0414C47.9531 52.6617 47.5734 52.5651 47.1729 52.7377V45.4608L52.6893 39.9997V39.9859Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M47.8773 37.9215C48.0637 38.3427 48.4779 38.4946 48.9681 38.2529C49.6309 37.9215 50.1763 36.9757 50.1832 36.1403V34.6076C50.197 34.1105 50.0037 33.7377 49.6723 33.6203C49.3409 33.503 48.9267 33.6549 48.5538 34.0208L40.7247 41.774C40.2621 42.2366 39.9514 42.9477 39.9514 43.5759V54.1253C39.9514 54.65 40.1724 55.0297 40.5314 55.1195C40.8904 55.2092 41.3391 55.0021 41.7119 54.5672L42.8304 53.2692C43.4173 52.5857 43.6451 51.557 43.3413 50.9771C43.1411 50.5974 42.7614 50.5007 42.3609 50.6733V43.3964L47.8773 37.9353V37.9215Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M60.3324 48.9818C60.3324 49.6032 60.0286 50.3212 59.5591 50.7769L51.7368 58.5301C51.364 58.896 50.9498 59.0479 50.6253 58.9306C50.3008 58.8132 50.1006 58.4542 50.1006 57.9571V47.4077C50.1006 46.7864 50.4044 46.0683 50.8738 45.6058L58.703 37.8525C59.0758 37.4866 59.4901 37.3347 59.8146 37.4521C60.139 37.5695 60.3393 37.9354 60.3393 38.4256V48.9749L60.3324 48.9818ZM57.9298 41.8569L52.5101 47.2213V54.5396L57.9229 49.1751V41.8569H57.9298Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
    </svg>
  );
}