import { Steps } from "antd";
import Link from "next/link";
import { redirect } from "next/navigation";
import { AttributeListItem, CreateApiButton } from "../staffs/create-api-button";
import { Button } from "@/components/ui/button";

export default function OverviewPage() {
  // return redirect("/app/apis");
  const description = 'This is a description.';
  return (
    <div className=" w-11/12 lg:w-2/3 xl:w-3/5  mx-auto text-[1.75rem] text-[#737373">
      <div className="pt-[4rem]">
        <Steps
          className=""
          current={0}
          items={[
            {
              title: '探索',
              description: "",
            },
            {
              title: '创建客服',
              description: "",
              subTitle: '',
            },
            {
              title: '上线',
              description: "",
            },
          ]}
        />
      </div>

      <div className="mt-10 flex min-h-[400px] flex-col items-center  justify-center space-y-6 rounded-lg border border-dashed px-4 md:mt-24">
        <h3 className="text-center text-xl font-semibold leading-none tracking-tight md:text-2xl">
          根据业务需求开始
        </h3>
        <p className="text-center text-sm text-gray-500 md:text-base">
          在设置AI客服之前，先来看看我们的产品以及它们是如何协同工作的。
        </p>
        {/* <Link
          href="/new"
          className="mr-3 rounded-lg bg-gray-800 px-4 py-2 text-center text-sm font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-800"
        >
          探索
        </Link> */}

        <section className="my-4 flex flex-col gap-4 md:flex-row md:items-center">

          {/* <CreateApiButton key="createApi" /> */}

          {/* manage/new/ */}

          <Link
            href="/manage/new/"
          >
            <Button className="w-full items-center gap-2 ">
              创建新员工
            </Button>
          </Link>


        </section>
      </div>
    </div>
  )
}