import React from "react";
import { HeartTwoTone, SmileTwoTone } from "@ant-design/icons";
import { Card, Typography, Alert } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { useIntl } from "umi";

const Admin = () => {
  const intl = useIntl();
  return (
    <PageHeaderWrapper
      content={intl.formatMessage({
        id: "pages.admin.subPage.title",
        defaultMessage: "This page can only be viewed by admin",
      })}
    >
      <Card>
        <Alert
          message={intl.formatMessage({
            id: "pages.welcome.alertMessage",
            defaultMessage:
              "Faster and stronger heavy-duty components have been released.",
          })}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 48,
          }}
        />
        <Typography.Title
          level={2}
          style={{
            textAlign: "center",
          }}
        >
          <SmileTwoTone /> Ant Design Pro{" "}
          <HeartTwoTone twoToneColor="#eb2f96" /> You
        </Typography.Title>
      </Card>
      <p
        style={{
          textAlign: "center",
          marginTop: 24,
        }}
      >
        Want to add more pages? Please refer to{" "}
        <a
          href="https://pro.ant.design/docs/block-cn"
          target="_blank"
          rel="noopener noreferrer"
        >
          use block
        </a>
        。
      </p>
    </PageHeaderWrapper>
  );
};

export default Admin;