const ChartOnRight = ({ className }: { className?: string }) => {
  return (
    <svg
      className={`${className}`}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 106 60"
      fill="none"
    >
      <rect width="106" height="60" rx="4" fill="var(--bkg-1)" />
      <rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
      <rect x="22" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="34"
        y="10"
        width="2"
        height="12"
        transform="rotate(90 34 10)"
        fill="var(--down)"
      />
      <rect
        x="34"
        y="54"
        width="2"
        height="12"
        transform="rotate(90 34 54)"
        fill="var(--up)"
      />
      <rect
        x="32"
        y="14"
        width="2"
        height="10"
        transform="rotate(90 32 14)"
        fill="var(--down)"
      />
      <rect
        x="32"
        y="50"
        width="2"
        height="10"
        transform="rotate(90 32 50)"
        fill="var(--up)"
      />
      <rect
        x="30"
        y="18"
        width="2"
        height="8"
        transform="rotate(90 30 18)"
        fill="var(--down)"
      />
      <rect
        x="30"
        y="46"
        width="2"
        height="8"
        transform="rotate(90 30 46)"
        fill="var(--up)"
      />
      <rect
        x="28"
        y="22"
        width="2"
        height="6"
        transform="rotate(90 28 22)"
        fill="var(--down)"
      />
      <rect
        x="28"
        y="42"
        width="2"
        height="6"
        transform="rotate(90 28 42)"
        fill="var(--up)"
      />
      <rect
        x="26"
        y="26"
        width="2"
        height="4"
        transform="rotate(90 26 26)"
        fill="var(--down)"
      />
      <rect
        x="26"
        y="38"
        width="2"
        height="4"
        transform="rotate(90 26 38)"
        fill="var(--up)"
      />
      <rect
        x="24"
        y="30"
        width="2"
        height="2"
        transform="rotate(90 24 30)"
        fill="var(--down)"
      />
      <rect
        x="24"
        y="34"
        width="2"
        height="2"
        transform="rotate(90 24 34)"
        fill="var(--up)"
      />
      <rect x="2" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="10"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 10 10)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="14"
        width="2"
        height="14"
        transform="rotate(90 18 14)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="26"
        width="2"
        height="14"
        transform="rotate(90 18 26)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="18"
        width="4"
        height="14"
        transform="rotate(90 18 18)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 18 10)"
        fill="var(--fgd-4)"
      />
      <rect x="42" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
      <rect
        x="58"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 58 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="58"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 58 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="72"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 72 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="72"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 72 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="86"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 86 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="86"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 86 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="100"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 100 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="100"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 100 52)"
        fill="var(--fgd-4)"
      />
      <rect x="42" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
      <rect x="46" y="29" width="2" height="7" fill="var(--up)" />
      <rect x="50" y="25" width="2" height="7" fill="var(--up)" />
      <rect x="58" y="23" width="2" height="7" fill="var(--down)" />
      <rect x="70" y="21" width="2" height="7" fill="var(--up)" />
      <rect x="78" y="16" width="2" height="7" fill="var(--up)" />
      <rect x="90" y="17" width="2" height="7" fill="var(--up)" />
      <rect x="54" y="25" width="2" height="3" fill="var(--down)" />
      <rect x="62" y="28" width="2" height="3" fill="var(--up)" />
      <rect x="66" y="27" width="2" height="3" fill="var(--down)" />
      <rect x="74" y="21" width="2" height="3" fill="var(--down)" />
      <rect x="82" y="18" width="2" height="3" fill="var(--down)" />
      <rect x="86" y="20" width="2" height="3" fill="var(--down)" />
      <rect x="94" y="16" width="2" height="3" fill="var(--down)" />
      <rect x="98" y="17" width="2" height="3" fill="var(--down)" />
    </svg>
  )
}

export default ChartOnRight
