/**
 * title: "带描述"
 * description: "设置item数据的desc字段，显示描述文案。"
 */
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';

const list = [
  { title: '已完成步骤', key: 1, desc: '一句话描述文案' },
  { title: '当前步骤', key: 2, desc: '一句话描述文案' },
  { title: '未完成最后步骤', key: 3, desc: '一句话描述文案' },
];

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

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

  const steps1 = list.map((item) => (
    <Step.Item
      key={item.key}
      title={item.title}
      content={item.desc}
      onClick={(index) => stepClick(index)}
    />
  ));

  return (
    <div>
      <Step current={currentStep} shape="circle" labelPlacement="hoz">
        {steps1}
      </Step>
    </div>
  );
}