import * as React from "react";
import type { IconProps, IconMetadata, IconComponent } from "../../types";

export const ChartJs: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function ChartJs(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    ...props
  },
  forwardedRef,
) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      strokeWidth={strokeWidth}
      strokeLinecap={strokeLinecap}
      strokeLinejoin={strokeLinejoin}
      strokeDasharray={strokeDasharray}
      opacity={opacity}
      {...props}
      ref={forwardedRef}
    >
      <g clipPath="url(#undefined-clip0_2066_917)">
        <path
          d="M21.3907 12.0655C18.0012 12.1312 18.7072 14.2521 16.3185 14.7885C13.8918 15.3334 13.5087 8.93054 11.0827 8.93054C8.65634 8.93054 8.11896 15.1502 5.08085 19.42L4.99414 19.5409L11.5077 23.2573L21.3907 17.6181V12.0655Z"
          fill="#36a2eb"
        />
        <path
          d="M21.3907 11.8724C20.2561 10.433 19.4865 8.77832 17.8306 8.77832C14.9004 8.77832 15.6715 13.503 12.4331 13.503C9.19433 13.503 8.85381 8.42092 5.18497 13.1982C4.01586 14.7204 3.07488 16.4177 2.33569 18.0238L11.5078 23.2575L21.3907 17.6182V11.8724Z"
          fill="#ffce56"
        />
        <path
          opacity=".8"
          d="M1.62451 13.8296C2.73645 10.7859 3.21633 8.32092 5.33913 8.32092C8.57756 8.32092 9.34841 17.3135 12.1246 16.3986C14.9004 15.4842 14.5918 10.6068 18.9101 10.6068C19.7321 10.6068 20.5713 11.1045 21.3908 11.9096V17.6181L11.5079 23.2573L1.62451 17.6182V13.8297V13.8296Z"
          fill="#fe6184"
        />
        <path
          d="M11.5 23.9643L1 17.9735V5.99108L11.5 0L22 5.99108V17.9732L11.5 23.9643ZM2.23367 17.2695L11.5 22.5568L20.7663 17.2695V6.69503L11.5 1.40773L2.23367 6.69503V17.2695Z"
          fill="#e7e9ed"
        />
      </g>
      <defs>
        <clipPath id="undefined-clip0_2066_917">
          <path fill="#fff" transform="translate(1)" d="M0 0H21V24H0z" />
        </clipPath>
      </defs>
    </svg>
  );
});

ChartJs.displayName = "ChartJs";

ChartJs.metadata = {
  name: "ChartJs",
  category: "icon/library",
  tags: ["chart", "js", "icon"],
  description: "ChartJs icon from icon/library category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default ChartJs;