import { PostEntity } from "@3rapp/api/modules/content/entities/post.entity";
import { StyleProvider } from "@ant-design/cssinjs";
import { Button, ConfigProvider, theme, App as AntdApp } from "antd";
// import 'dayjs/locale/zh-cn';
import zhCN from "antd/locale/zh_CN";

import axios from "axios";
import { FC, useEffect, useState } from "react";

import $styles from "./app.module.css";

const getPosts = async () => {
  let data: PostEntity[] = [];
  try {
    const res = await axios.get("/api/posts");
    data = res.data;
  } catch (err) {
    console.log("Error:", err);
  }
  return data;
};

const App: FC = () => {
  const [data, setData] = useState<PostEntity[]>([]);
  useEffect(() => {
    (async () => {
      setData(await getPosts());
    })();
  }, []);
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: theme.defaultAlgorithm,
        token: {
          colorPrimary: "#00B96B",
        },
        components: {
          Layout: {
            colorBgBody: "",
          },
        },
      }}
    >
      <StyleProvider hashPriority="high">
        <AntdApp>
          <div className={$styles.app}>
            <div className={$styles.container}>
              欢迎来到3R教室，这是<span>React课程第一节</span>
              <Button
                type="primary"
                className="!bg-lime-400 !text-emerald-900"
                href="https://pincman.com/3r"
                target="_blank"
              >
                点此打开
              </Button>
              <h2>文章列表</h2>
              <ul>
                {data.map((item) => (
                  <li key={item.id}>{item.title}</li>
                ))}
              </ul>
            </div>
          </div>
        </AntdApp>
      </StyleProvider>
    </ConfigProvider>
  );
};
export default App;