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

export const IconStepBackFill = 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-back-fill`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M8.86209 2.7629C9.17413 2.89158 9.37774 3.19578 9.37774 3.53331V6.47582C11.6231 6.66719 13.5762 7.57544 15.2035 9.19214C17.0152 10.9921 18.0549 13.2375 18.329 15.8873C18.3667 16.2518 18.1619 16.5982 17.8243 16.7407C17.4867 16.8833 17.0956 16.7886 16.8606 16.5074C15.0473 14.3373 13.5735 13.2861 12.442 13.0507C11.3681 12.8273 10.3478 12.7588 9.37774 12.8386V16.0333C9.37774 16.3749 9.16927 16.6819 8.85176 16.8079C8.53425 16.9339 8.172 16.8533 7.93779 16.6047L1.89347 10.1875C1.58527 9.8603 1.59212 9.34761 1.90896 9.02876L7.95328 2.94593C8.1912 2.7065 8.55004 2.63423 8.86209 2.7629Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconStepBackFill.displayName = "IconStepBackFill";

export default IconStepBackFill;