import React from 'react';
import { Card, Layout, Typography, Row, Col, Button } from 'antd';
import { PlusOutlined, UploadOutlined, EditOutlined } from '@ant-design/icons';
import { Link } from 'umi';

const { Content } = Layout;
const { Title, Text } = Typography;

const ProductManagement: React.FC = () => {
  return (
    <Content style={{ padding: 24, margin: 0, minHeight: 280, background: '#fff' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Title level={4}>商品管理</Title>
        <div>
          <Button type="primary" icon={<PlusOutlined />} style={{ marginRight: 8 }}>
            <Link to="/Product/ProductPublishForm">发布商品</Link>
          </Button>
          <Button icon={<UploadOutlined />} style={{ marginRight: 8 }}>
            <Link to="/Product/MaterialUpload">素材上传</Link>
          </Button>
          <Button icon={<EditOutlined />}>
            <Link to="/Product/ProductDetail">编辑商品</Link>
          </Button>
        </div>
      </div>
      
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card title="商品列表">
            <Text>商品管理页面内容</Text>
          </Card>
        </Col>
      </Row>
    </Content>
  );
};

export default ProductManagement;