import React from "react";
import Layout from "../../Layout";
import { HeaderImg } from "../Solution";
import { FootImg } from "../../App";
import { useLocation } from "react-router-dom";
import { Row, Col, Typography, Image } from "antd";
import DetailImg from '../../static/web/org/bsns/8.jpg';
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { RightCol } from "./news";

const { Title, Paragraph, } = Typography;
export const TipsArticle = () => <Row justify='space-between' style={{ fontSize: 12 }}>
    <Col style={{cursor:'pointer'}}><ArrowLeftOutlined />上一篇：标题占位标题占位标题占位标题占位</Col>
    <Col  style={{cursor:'pointer'}}><ArrowRightOutlined />下一篇：标题占位标题占位标题占位标题占位</Col>
</Row>

const NewsDetail = () => {
    const location = useLocation();
    return (<>
        <Layout>
            <HeaderImg />
            <Row className="news_container">
                <Col span={16}>
                    <div className="news_list" style={{ backgroundColor: '#f1f1f1' }}>
                        <Title level={3} style={{ color: '#58BE70' }}>标题{location.state}占位占位占位占位</Title>
                        <Paragraph style={{ fontSize: '17px' }}>创建时间：2023-06-07</Paragraph>
                        <Paragraph style={{ lineHeight: 3 }}>
                            详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位详情占位
                        </Paragraph>
                        <Image src={DetailImg} style={{ marginBottom: 20 }} />
                        <Paragraph>关键词：xxxxxxx</Paragraph>
                        <TipsArticle />
                    </div>
                </Col>
                <RightCol />
            </Row>
            <FootImg />
        </Layout>
    </>)
};

export default NewsDetail;