/** @format */
import React from "react";
import { Avatar, Button, Card, Divider, Flex, Tooltip } from "antd";
import {
	ExportOutlined,
	InfoCircleOutlined,
	LeftOutlined,
	WarningOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import "aieditor/dist/style.css";
import { ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";
import logo from "@/assets/icons/baiduyun.svg";
import { Typography } from "antd";

const { Paragraph } = Typography;
const ShareDetail: React.FunctionComponent = () => {
	const navigate = useNavigate();
	return (
		<>
			<div>
				<ProCard bordered={true}>
					<Button
						shape="circle"
						icon={<LeftOutlined />}
						onClick={() => {
							navigate("/main/share/list/1");
						}}
					/>
				</ProCard>
				<div className={styles.share_detail_container}>
					<ProCard bordered={true}>
						<div style={{ height: 500 }}>
							资源描述
						</div>

						<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
							<Flex vertical={false} align={"center"} justify={"space-between"}>
								<span
									style={{
										fontSize: 18,
										color: "#1677FF",
										fontWeight: "bolder",
									}}>
									资源下载
								</span>
								<Button icon={<WarningOutlined />} type={"primary"}>
									投诉
								</Button>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"space-between"}>
								<span style={{ fontSize: 16 }}>Windows DefenderRemover</span>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"space-between"}>
								<span
									style={{
										fontSize: 18,
										color: "#1677FF",
										fontWeight: "bolder",
									}}>
									下载地址
								</span>
							</Flex>
							<Flex
								vertical={false}
								align={"center"}
								style={{ marginTop: 10 }}
								justify={"space-between"}>
								<Card hoverable={true} style={{ width: 280, height: 140 }}>
									<Flex vertical={true}>
										<Flex
											vertical={false}
											justify={"space-between"}
											align={"center"}>
											<div>
												<Avatar src={logo}></Avatar>
												<span
													style={{
														marginLeft: 10,
														color: "#1677FF",
														fontSize: 16,
													}}>
													百度云
												</span>
											</div>
											<ExportOutlined className={styles.link_btn} />
										</Flex>
										<Divider></Divider>
										<Flex vertical={false}>
											<Tooltip
												title="DefenderRemove111111111"
												placement={"bottom"}>
												<span style={{ width: 150, overflowX: "hidden" }}>
													DefenderRemove111111111
												</span>
											</Tooltip>
											<span
												style={{
													width: 130,
													marginLeft: 10,
													display: "flex",
													flexDirection: "row",
												}}>
												<span style={{ color: "#1677FF" }}>密码：</span>{" "}
												<Paragraph copyable>12345</Paragraph>
											</span>
										</Flex>
									</Flex>
								</Card>
							</Flex>
							<Flex vertical={false} style={{ marginTop: 10 }}>
								<span style={{ color: "grey" }}>
									<InfoCircleOutlined />
									本站所有资源均来源于网络，仅供学习使用，请下载后24小时内删除
								</span>
							</Flex>
						</Card>
					</ProCard>
				</div>
			</div>
		</>
	);
};
export default ShareDetail;
