import React, { useContext } from "react";
import { useParams } from "react-router";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import Personal from "./components/Personal";
import Company from "./components/Company";

import { UserInfoContext } from "../../context/UserInfoContext";
import { AUTH, AUTH_TYPE_CODE } from "../../constants";

const Authentication: React.FC = () => {
  const { type } = useParams<{ type: AUTH_TYPE_CODE }>();
  const userInfo = useContext(UserInfoContext);
  const label = Object.values(AUTH).find((item) => item.code === type).cname;

  return (
    <>
      <PageHeader label={`${label}实名认证`}></PageHeader>
      <PageLayout>
        {type === AUTH.PERSONAL.code && <Personal userInfo={userInfo} />}
        {type === AUTH.COMPANY.code && <Company userInfo={userInfo} />}
      </PageLayout>
    </>
  );
};

export default Authentication;
