import React, { useState } from 'react';
import * as PropTypes from 'prop-types';
import { Steps as TSteps, Button } from '@tencent/tea-component-mobile';
import "@tencent/tea-component-mobile/dist/tea.css"
import './index.less';

const steps = [
  {
    title: '基本信息',
    description: '步骤描述信息',
  },
  {
    title: '付款信息',
    description: '步骤描述信息',
  },
  { title: '线下汇款' },
  { title: '结果反馈' },
];

export default function Steps({
  text,
  size = 'default',
  type = 'primary',
  loading = false,
  disabled = false,
  plain = false,
  events,
  ...props
}) {
  const [current, setCurrent] = useState(3);
  return (
    <div className="page">

      <div className="section">
        <TSteps steps={steps} current={current} vertical={true} />
      </div>
    </div>
  );
}

Steps.propTypes = {
  /**
   * 组件类型
   */
  type: PropTypes.oneOf(['primary', 'warn', 'default']),
  /**
   * 按钮大小
   */
  size: PropTypes.oneOf(['default', 'mini']),
  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * 加载中
   */
  loading: PropTypes.bool,

  /**
   * 镂空
   */
  plain: PropTypes.bool,

  /**
   * 按钮内容
   */
  text: PropTypes.string,

  /**
   * 低码平台注入的事件触发器
   */
  events: PropTypes.objectOf(PropTypes.func),
};

/**
 * 默认属性
 */
Steps.defaultProps = {
  type: 'primary',
  size: 'default',
};
