/** @format */
import { FunctionComponent } from "react";
import { Avatar, Card, Empty, List } 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 data = [
		{
			title: "Ant Design Title 1",
		},
		{
			title: "Ant Design Title 2",
		},
		{
			title: "Ant Design Title 3",
		},
		{
			title: "Ant Design Title 4",
		},
	];
	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>}>
					<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
						<Meta
							avatar={<Avatar src={gitee} />}
							title="Card title"
							description="This is the description"
						/>
					</Card>
				</ProCard>
				<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
					<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>
				</ProCard>
			</div>
			<div className={styles.user_info_bottom_content}>
				<ProCard
					bordered
					style={{ maxWidth: "64%" }}
					title="最近动态"
					boxShadow
					extra={<Link to={"#"}>查看更多</Link>}>
					<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>
						)}
					/>
				</ProCard>
				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
				</ProCard>
			</div>
		</>
	);
};
export default UserInfo;