import { createElement, useState, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Step } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import './index.css';

const StepDemo = () => {
  const [curStep, setCurStep] = useState(-1);

  const handleChange = (step) => {
    setCurStep(step);
  };

  const handleClick = (step) => {
    console.log(`${step} clicked`);
  };

  return (
    <View>
      <Text className="demo-title">custom</Text>
      <View className="demo-content">
        <Step shape={'circle'} current={curStep} onChange={handleChange}>
          <Step.Item
            title={<Text className="custom-title">标题</Text>}
            content={<Text className="custom-content">自定义文案1</Text>}
            onClick={handleClick}
          />
          <Step.Item
            title={<Text className="custom-title">标题2</Text>}
            content={<Text className="custom-content">自定义文案2</Text>}
            onClick={handleClick}
          />
          <Step.Item
            title={<Text className="custom-title">标题3</Text>}
            content={<Text className="custom-content">自定义文案3</Text>}
            onClick={handleClick}
          />
        </Step>
      </View>
    </View>
  );
};
// render(<StepDemo />, null, { driver: DriverUniversal });
 export default StepDemo