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

export const NoteHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
  <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
    <g opacity="0.2">
      <path
        d="M30.6721 2.43395C30.0921 2.13895 29.3471 2.16395 28.5371 2.57395L6.20711 13.9539C4.37211 14.8889 2.8821 17.4589 2.8821 19.6889V46.864C2.8821 48.109 3.34211 48.9839 4.06711 49.3589L1.8371 48.224C1.1121 47.854 0.6521 46.9739 0.6521 45.7289V18.5539C0.6521 16.3189 2.1421 13.7539 3.9771 12.8189L26.3071 1.43895C27.1221 1.02395 27.8671 1.00395 28.4421 1.29895L30.6721 2.43395Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M30.6721 2.43393C31.3971 2.80393 31.8571 3.68392 31.8571 4.92892V32.1039C31.8571 34.3389 30.3671 36.9039 28.5321 37.8389L6.20209 49.2189C5.38709 49.6339 4.64209 49.6539 4.06709 49.3589C3.34209 48.9889 2.88208 48.1089 2.88208 46.8639V19.6889C2.88208 17.4539 4.37209 14.8889 6.20709 13.9539L28.5371 2.57393C29.3521 2.15893 30.0971 2.13893 30.6721 2.43393Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </g>
    <g opacity="0.6">
      <path
        d="M40.4171 6.76894C39.8371 6.47394 39.0921 6.49894 38.2821 6.90894L15.9521 18.2889C14.1171 19.2239 12.6271 21.7939 12.6271 24.0239V51.1989C12.6271 52.4439 13.0871 53.3189 13.8121 53.6939L11.5821 52.5589C10.8571 52.1889 10.3971 51.3089 10.3971 50.0639V22.8889C10.3971 20.6539 11.8871 18.0889 13.7221 17.1539L36.0521 5.77394C36.8671 5.35894 37.6121 5.33894 38.1871 5.63394L40.4171 6.76894Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M40.4171 6.76892C41.1421 7.13892 41.6021 8.01892 41.6021 9.26392V36.4389C41.6021 38.6739 40.1121 41.2389 38.2771 42.1739L15.9471 53.5539C15.1321 53.9689 14.3871 53.9889 13.8121 53.6939C13.0871 53.3239 12.6271 52.4439 12.6271 51.1989V24.0239C12.6271 21.7889 14.1171 19.2239 15.9521 18.2889L38.2821 6.90892C39.0971 6.49392 39.8421 6.47392 40.4171 6.76892Z"
        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
        strokeWidth="0.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </g>
    <path
      d="M50.1621 11.0739C49.5821 10.7789 48.8371 10.8039 48.0271 11.2139L25.6971 22.5939C23.8621 23.5289 22.3721 26.0989 22.3721 28.3289V55.5039C22.3721 56.7489 22.8321 57.6239 23.5571 57.9989L21.3271 56.8639C20.6021 56.4939 20.1421 55.6139 20.1421 54.3689V27.1939C20.1421 24.9589 21.6321 22.3939 23.4671 21.4589L45.7971 10.0789C46.6121 9.66393 47.3571 9.64393 47.9321 9.93893L50.1621 11.0739Z"
      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
      strokeWidth="0.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M50.1621 11.0739C50.8871 11.4439 51.3471 12.3239 51.3471 13.5689V40.7439C51.3471 42.9789 49.8571 45.5439 48.0221 46.4789L25.6921 57.8589C24.8771 58.2739 24.1321 58.2939 23.5571 57.9989C22.8321 57.6289 22.3721 56.7489 22.3721 55.5039V28.3289C22.3721 26.0939 23.8621 23.5289 25.6971 22.5939L48.0271 11.2139C48.8421 10.7989 49.5871 10.7789 50.1621 11.0739Z"
      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
      strokeWidth="0.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M43.5321 23.1439L32.4371 28.7939C31.1271 29.4639 30.0621 31.2989 30.0621 32.8939V46.3939C30.0621 47.9889 31.1271 48.7439 32.4371 48.0789L41.1521 43.6389C41.3621 43.5289 41.5671 43.3239 41.7171 43.0689L45.6771 36.2289C45.8271 35.9739 45.9071 35.6839 45.9071 35.4239V24.8189C45.9071 23.2239 44.8371 22.4739 43.5271 23.1389L43.5321 23.1439ZM44.3221 34.3089L41.9471 35.5189C40.6371 36.1889 39.5671 38.0289 39.5671 39.6239V42.5139L32.4371 46.1489C32.0021 46.3689 31.6471 46.1239 31.6471 45.5889V32.0889C31.6471 31.5539 32.0021 30.9439 32.4371 30.7239L43.5321 25.0739C43.9721 24.8489 44.3221 25.0989 44.3221 25.6339V34.3139V34.3089Z"
      fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
    />
  </svg>
);