/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Empty, List, Skeleton } from "antd";
import {
	AntDesignOutlined,
	BankOutlined,
	BulbOutlined,
	EnvironmentOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";
import { ProCard } from "@ant-design/pro-components";
import Meta from "antd/es/card/Meta";
import gitee from "@/assets/icons/gitee.svg";
import { Link } from "react-router-dom";

const UserInfo: FunctionComponent = () => {
	const [loading, setLoading] = useState(true);
	const data = [
		{
			title: "Ant Design Title 1",
		},
		{
			title: "Ant Design Title 2",
		},
		{
			title: "Ant Design Title 3",
		},
		{
			title: "Ant Design Title 4",
		},
	];
	useEffect(() => {
		setTimeout(() => {
			setLoading(false);
		}, 2000);
	}, []);
	return (
		<>
			<div className={styles.user_info_header}>
				<div className={styles.user_info_header_avatar}>
					<Avatar
						size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
						icon={<AntDesignOutlined />}
					/>
					<span className={styles.user_info_header_name}>用户名</span>
					<div className={styles.user_info_header_desc}>
						<div>
							<BulbOutlined /> 前端架构师
						</div>
						<div>
							<EnvironmentOutlined /> 成都
						</div>
						<div>
							<BankOutlined /> 成都市上城
						</div>
					</div>
				</div>
			</div>
			<div className={styles.user_info_center_content}>
				<ProCard
					bordered
					style={{ maxWidth: "64%" }}
					title="我的存储商"
					boxShadow
					extra={<Link to={"#"}>查看更多</Link>}>
					<Skeleton loading={loading} active>
						<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
							<Meta
								avatar={<Avatar src={gitee} />}
								title="Card title"
								description="This is the description"
							/>
						</Card>
					</Skeleton>
				</ProCard>

				<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
					<Skeleton loading={loading} active>
						<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
							<Meta
								avatar={
									<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
								}
								title="Card title"
								description="This is the description"
							/>
						</Card>
					</Skeleton>
				</ProCard>
			</div>
			<div className={styles.user_info_bottom_content}>
				<ProCard
					bordered
					style={{ maxWidth: "64%" }}
					title="最近动态"
					boxShadow
					extra={<Link to={"#"}>查看更多</Link>}>
					<Skeleton loading={loading} active avatar>
						<List
							itemLayout="horizontal"
							dataSource={data}
							renderItem={(item, index) => (
								<List.Item>
									<List.Item.Meta
										avatar={
											<Avatar
												src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
											/>
										}
										title={<a href="https://ant.design">{item.title}</a>}
										description="Ant Design, a design language for background applications, is refined by Ant UED Team"
									/>
								</List.Item>
							)}
						/>
					</Skeleton>
				</ProCard>
				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
				</ProCard>
			</div>
		</>
	);
};
export default UserInfo;