import React, { useState } from "react";
import { Stepper } from "@tencent/tea-component";
import { ExternalLink } from "../../link";
import { Segment } from "../../segment";

export default function StepperExample() {
  const [type, setType] = useState("default");

  const steps = [
    {
      id: "prepare",
      label: "验证备案类型",
    },
    { id: "info", label: "填写备案信息" },
    {
      id: "upload",
      label: "上传资料",
      detail: (
        <p>
          <ExternalLink>上传资料说明</ExternalLink>
        </p>
      ),
    },
    { id: "photo", label: "办理拍照" },
    { id: "finish", label: "完成备案" },
  ];

  return (
    <>
      <section style={{ marginBottom: 40 }}>
        <Segment
          options={[
            { value: "default", text: "水平" },
            { value: "vertical", text: "垂直" },
          ]}
          value={type}
          onChange={type => setType(type)}
        ></Segment>
      </section>
      <Stepper
        // @ts-ignore
        type={type}
        steps={steps}
        current="info"
      />
    </>
  );
}