import React from 'react';
import {
  Card, Row, Col, Typography, Statistic, Space
} from 'antd';
import {
  UserOutlined, BellOutlined, EyeOutlined
} from '@ant-design/icons';

const { Title } = Typography;

// 仪表盘页面
export const DashboardPage = () => {
  return (
    <div>
      <div className="mb-6 flex justify-between items-center">
        <Title level={2}>仪表盘</Title>
      </div>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={8}>
          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
            <div className="flex items-center justify-between mb-2">
              <Typography.Title level={5}>活跃用户</Typography.Title>
              <UserOutlined style={{ fontSize: 24, color: '#1890ff' }} />
            </div>
            <Statistic
              value={112893}
              loading={false}
              valueStyle={{ fontSize: 28 }}
              prefix={<span style={{ color: '#52c41a' }}>↑</span>}
              suffix="人"
            />
            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
              较昨日增长 12.5%
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={8}>
          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
            <div className="flex items-center justify-between mb-2">
              <Typography.Title level={5}>系统消息</Typography.Title>
              <BellOutlined style={{ fontSize: 24, color: '#faad14' }} />
            </div>
            <Statistic
              value={93}
              loading={false}
              valueStyle={{ fontSize: 28 }}
              prefix={<span style={{ color: '#faad14' }}>●</span>}
              suffix="条"
            />
            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
              其中 5 条未读
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={8}>
          <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
            <div className="flex items-center justify-between mb-2">
              <Typography.Title level={5}>在线用户</Typography.Title>
              <EyeOutlined style={{ fontSize: 24, color: '#722ed1' }} />
            </div>
            <Statistic
              value={1128}
              loading={false}
              valueStyle={{ fontSize: 28 }}
              suffix="人"
            />
            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
              当前在线率 32.1%
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};