import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface BlankStepsProps extends StyledProps {
  /**
   * 步骤内容
   */
  steps: React.ReactNode[];
}

export const BlankSteps = React.forwardRef(function BlankSteps(
  { steps = [], className, ...props }: BlankStepsProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-blank-page-v2__step`, className)}
      {...props}
    >
      {steps.map((step, index) => (
        <div className="item" key={index}>
          <i className="num">{index + 1}</i>
          {step}
        </div>
      ))}
    </div>
  );
});

BlankSteps.displayName = "BlankSteps";