/**
 * title: "默认"
 * description: "基本使用方式。"
 */
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';

const list = [
  { title: '已完成步骤', key: 1 },
  { title: '当前步骤', key: 2 },
  { title: '未完成最后步骤', key: 3 },
];

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

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

  const steps = list.map((item) => (
    <Step.Item
      key={item.key}
      title={item.title}
      onClick={(index) => stepClick(index)}
    />
  ));
  return (
    <div>
      <Step current={currentStep} shape="circle" labelPlacement="hoz">
        {steps}
      </Step>
    </div>
  );
};