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

export function ProjectHorizontalStackIllustration({
  className,
}: TIllustrationAssetProps) {
  return (
    <svg
      width="102"
      height="115"
      viewBox="0 0 102 115"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <g opacity="0.2">
        <path
          d="M60.2802 2.91941C59.1202 2.32941 57.6302 2.37941 56.0102 3.19941L11.3502 25.9594C7.68023 27.8294 4.70023 32.9694 4.70023 37.4294V91.7794C4.70023 94.2694 5.62023 96.0194 7.07023 96.7694L2.61023 94.4994C1.16023 93.7594 0.240234 91.9994 0.240234 89.5094V35.1594C0.240234 30.6894 3.22023 25.5594 6.89023 23.6894L51.5602 0.929412C53.1902 0.0994115 54.6802 0.0594115 55.8302 0.649411L60.2902 2.91941H60.2802Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M60.2812 2.91943C61.7312 3.65943 62.6512 5.41943 62.6512 7.90943V62.2594C62.6512 66.7294 59.6712 71.8594 56.0012 73.7294L11.3412 96.4894C9.71117 97.3194 8.22117 97.3594 7.07117 96.7694C5.62117 96.0294 4.70117 94.2694 4.70117 91.7794V37.4294C4.70117 32.9594 7.68117 27.8294 11.3512 25.9594L56.0112 3.19943C57.6412 2.36943 59.1312 2.32943 60.2812 2.91943Z"
          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="M79.7705 11.5895C78.6105 10.9995 77.1205 11.0495 75.5005 11.8695L30.8405 34.6295C27.1705 36.4995 24.1905 41.6395 24.1905 46.0995V100.449C24.1905 102.939 25.1105 104.689 26.5605 105.439L22.1005 103.169C20.6505 102.429 19.7305 100.669 19.7305 98.1795V43.8295C19.7305 39.3595 22.7105 34.2295 26.3805 32.3595L71.0405 9.59946C72.6705 8.76946 74.1605 8.72946 75.3105 9.31946L79.7705 11.5895Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M79.7714 11.5895C81.2214 12.3295 82.1414 14.0895 82.1414 16.5795V70.9295C82.1414 75.3995 79.1614 80.5295 75.4914 82.3995L30.8314 105.159C29.2014 105.989 27.7114 106.029 26.5614 105.439C25.1114 104.699 24.1914 102.939 24.1914 100.449V46.0995C24.1914 41.6295 27.1714 36.4995 30.8414 34.6295L75.5014 11.8695C77.1314 11.0395 78.6214 10.9995 79.7714 11.5895Z"
          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
          strokeWidth="0.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </g>
      <path
        d="M99.2607 20.1994C98.1007 19.6094 96.6107 19.6594 94.9907 20.4794L50.3307 43.2394C46.6607 45.1094 43.6807 50.2494 43.6807 54.7094V109.059C43.6807 111.549 44.6007 113.299 46.0507 114.049L41.5907 111.779C40.1407 111.039 39.2207 109.279 39.2207 106.789V52.4394C39.2207 47.9694 42.2007 42.8394 45.8707 40.9694L90.5307 18.2094C92.1607 17.3794 93.6507 17.3394 94.8007 17.9294L99.2607 20.1994Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M99.2616 20.1995C100.712 20.9395 101.632 22.6995 101.632 25.1895V79.5395C101.632 84.0095 98.6516 89.1395 94.9816 91.0095L50.3216 113.769C48.6916 114.599 47.2016 114.639 46.0516 114.049C44.6016 113.309 43.6816 111.549 43.6816 109.059V54.7095C43.6816 50.2395 46.6616 45.1095 50.3316 43.2395L94.9916 20.4795C96.6216 19.6495 98.1116 19.6095 99.2616 20.1995Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M85.8902 51.3394L81.9602 53.3394V51.7394C81.9602 49.0994 80.2002 47.8494 78.0302 48.9594L72.7802 51.6294C70.6102 52.7394 68.8502 55.7794 68.8502 58.4194V60.0194L64.9202 62.0194C62.7502 63.1294 60.9902 66.1694 60.9902 68.8094V84.7694C60.9902 87.4094 62.7502 88.6594 64.9202 87.5494L85.9002 76.8594C88.0702 75.7494 89.8302 72.7094 89.8302 70.0694V54.1094C89.8302 51.4694 88.0702 50.2194 85.9002 51.3294L85.8902 51.3394ZM71.4602 57.0894C71.4602 56.2094 72.0502 55.1894 72.7702 54.8294L78.0202 52.1594C78.7402 51.7894 79.3302 52.2094 79.3302 53.0894V54.6894L71.4602 58.6994V57.0994V57.0894ZM79.3302 57.8694V77.0194L71.4602 81.0294V61.8794L79.3302 57.8694ZM63.5902 83.4394V67.4794C63.5902 66.5994 64.1802 65.5794 64.9002 65.2194L68.8302 63.2194V82.3694L64.9002 84.3694C64.1802 84.7394 63.5902 84.3194 63.5902 83.4394ZM87.2002 71.4094C87.2002 72.2894 86.6102 73.3094 85.8902 73.6694L81.9602 75.6694V56.5194L85.8902 54.5194C86.6102 54.1494 87.2002 54.5694 87.2002 55.4494V71.4094Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
      />
    </svg>
  );
}