import { forwardRef } from "react";
import type { IconProps } from "@/types";

export const IconStepNextFill = forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, forwardedRef) => {
    const { className } = props;
    props = {
      ...props,
      width: `${props.width || props.size || 20}`,
      height: `${props.height || props.size || 20}`,
      className: `${
        className ? className + " " : ""
      }customeow-icon customeow-icon-icon-step-next-fill`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M11.138 2.7629C10.826 2.89158 10.6224 3.19578 10.6224 3.53331V6.47582C8.37705 6.66719 6.42389 7.57544 4.79664 9.19214C2.98489 10.9921 1.94519 13.2375 1.67113 15.8873C1.63343 16.2518 1.83827 16.5982 2.17586 16.7407C2.51344 16.8833 2.90454 16.7886 3.13951 16.5074C4.95286 14.3373 6.42667 13.2861 7.5581 13.0507C8.63206 12.8273 9.65235 12.7588 10.6224 12.8386V16.0333C10.6224 16.3749 10.8309 16.6819 11.1484 16.8079C11.4659 16.9339 11.8281 16.8533 12.0623 16.6047L18.1067 10.1875C18.4149 9.8603 18.408 9.34761 18.0912 9.02876L12.0468 2.94593C11.8089 2.7065 11.4501 2.63423 11.138 2.7629Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconStepNextFill.displayName = "IconStepNextFill";

export default IconStepNextFill;