// src/app.tsx

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;