/**
 * title: "特殊样式"
 * description: "设置icon属性，添加自定义图标。"
 */
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';

export default () => {
  const [currentStep, setCurrentStep] = useState(1);

  const stepClick = useCallback((index) => {
    setCurrentStep(index);
  }, []);

  return (
    <div>
      <Step
        current={currentStep}
        animation={false}
        shape="circle"
        labelPlacement="hoz"
        style={{ marginBottom: '32px' }}
      >
        <Step.Item
          title="已完成步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="当前步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="未完成最后步骤"
          icon="sub_account"
          onClick={(index) => stepClick(index)}
        />
      </Step>
      <Step
        current={currentStep}
        animation={false}
        shape="circle"
        labelPlacement="hoz"
      >
        <Step.Item
          title="已完成步骤"
          icon="checkmark"
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="当前步骤"
          percent={75}
          onClick={(index) => stepClick(index)}
        />
        <Step.Item
          title="未完成最后步骤"
          onClick={(index) => stepClick(index)}
        />
      </Step>
    </div>
  );
};