import { Card, Col, Row, Skeleton, Space } from 'antd';

/** 内容区占位骨架，贴近总览页结构 */
export default function PageSkeleton() {
  return (
    <Space vertical size={16} style={{ width: '100%' }}>
      <Row gutter={[16, 16]}>
        {Array.from({ length: 4 }).map((_, i) => (
          <Col key={i} xs={24} sm={12} md={6}>
            <Card variant="outlined">
              <Skeleton active paragraph={{ rows: 1 }} title={{ width: '40%' }} />
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={16}>
          <Card variant="outlined">
            <Skeleton active title={{ width: '30%' }} paragraph={false} style={{ marginBottom: 16 }} />
            <Skeleton.Node active style={{ width: '100%', height: 260 }}>
              <div />
            </Skeleton.Node>
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card variant="outlined">
            <Skeleton active title={{ width: '40%' }} paragraph={false} style={{ marginBottom: 16 }} />
            <Skeleton.Node active style={{ width: '100%', height: 260 }}>
              <div />
            </Skeleton.Node>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={16}>
          <Card variant="outlined">
            <Skeleton active paragraph={{ rows: 5 }} />
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card variant="outlined">
            <Skeleton active paragraph={{ rows: 5 }} />
          </Card>
        </Col>
      </Row>
    </Space>
  );
}
