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

export const Animate: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function Animate(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    ...props
  },
  forwardedRef,
) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 23"
      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_2039_257)">
        <path
          d="M4.24484 0.0157471H19.726C22.0731 0.0157471 23.9708 1.88169 23.9708 4.18942V18.8214C23.9708 21.1291 22.0731 22.9949 19.726 22.9949H4.24484C1.89771 22.9949 0 21.1291 0 18.8214V4.18942C0 1.88169 1.89771 0.0157471 4.24484 0.0157471Z"
          fill="#00005b"
        />
        <path
          d="M6.56196 11.8099H9.09898C9.03903 11.6037 8.9591 11.358 8.8693 11.1028C8.7751 10.8226 8.68517 10.5411 8.59956 10.2582C8.49963 9.95381 8.40975 9.65925 8.30983 9.35482C8.21 9.0504 8.12011 8.76562 8.04017 8.48084C7.96024 8.20593 7.89042 7.95059 7.82052 7.71489H7.80045C7.71057 8.13712 7.6007 8.55944 7.4609 8.98158C7.31106 9.45298 7.16131 9.94403 7.00143 10.4351C6.87243 10.8986 6.72584 11.3572 6.56196 11.8099ZM9.6883 13.764H5.98268L5.22363 16.0718C5.20356 16.1601 5.12371 16.2192 5.03383 16.2092H3.1362C3.02625 16.2092 2.99632 16.1504 3.02625 16.0325L6.25233 6.96858C6.28235 6.87034 6.31229 6.79174 6.35226 6.66415C6.39222 6.45797 6.41212 6.24184 6.41212 6.02579C6.40226 5.97671 6.44214 5.92763 6.49206 5.91785H9.08895C9.1688 5.91785 9.20877 5.94719 9.2188 5.99636L12.8543 16.0423C12.8844 16.1504 12.8543 16.1994 12.7545 16.1994H10.667C10.5971 16.2092 10.5272 16.1601 10.5072 16.0914L9.6883 13.764ZM13.983 16.062V10.2287C13.983 10.0521 13.983 9.84578 13.9729 9.62982C13.963 9.4039 13.963 9.19772 13.953 9.00132C13.943 8.80492 13.9331 8.6183 13.9231 8.50049C13.9131 8.47098 13.9131 8.43168 13.943 8.40233C13.9729 8.3826 14.003 8.37282 14.0429 8.37282H15.651C15.7109 8.37282 15.7608 8.3826 15.8108 8.40233C15.8507 8.4219 15.8807 8.46119 15.8907 8.51027C15.9106 8.56922 15.9406 8.64781 15.9606 8.72632C15.9902 8.83242 16.0102 8.94086 16.0205 9.0504C16.3318 8.78449 16.6909 8.57801 17.0793 8.44155C17.4688 8.31387 17.8782 8.24514 18.2878 8.24514C18.6074 8.24514 18.927 8.29431 19.2266 8.39247C19.9357 8.6183 20.495 9.15842 20.7448 9.84578C20.9046 10.2485 20.9644 10.7787 20.9644 11.4171V16.062C20.9644 16.1601 20.9244 16.1994 20.8346 16.1994L18.9569 16.2192C18.877 16.2289 18.8072 16.1799 18.7971 16.1013V11.6626C18.7871 11.368 18.7272 11.0734 18.6074 10.8081C18.5175 10.6117 18.3776 10.4351 18.1978 10.3172C17.9882 10.1895 17.7584 10.1306 17.5187 10.1404C17.2589 10.1404 16.9994 10.1797 16.7596 10.278C16.5398 10.3663 16.3401 10.4939 16.1604 10.651V16.0718C16.1604 16.17 16.1204 16.2092 16.0304 16.2092H14.1328C14.0628 16.2192 14.003 16.17 13.993 16.1013C13.9729 16.0816 13.9729 16.0718 13.983 16.062Z"
          fill="#99f"
        />
      </g>
      <defs>
        <clipPath id="undefined-clip0_2039_257">
          <path fill="#fff" d="M0 0H24V23H0z" />
        </clipPath>
      </defs>
    </svg>
  );
});

Animate.displayName = "Animate";

Animate.metadata = {
  name: "Animate",
  category: "icon/design",
  tags: ["animate", "icon"],
  description: "Animate icon from icon/design category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default Animate;