import React from 'react';
import ContentBox from '../../../themeComponents/ContentBox';
import InfoBox from '../../../themeComponents/ContentBox/InfoBox';
import CaptureCard from '../../../businessComponents/CaptureCard';
import { Row, Col } from 'antd';
import { data1 } from './mock';
import './index.less';

export default function CardTheme() {
  return (
    <ContentBox className="card-theme-component">
      <InfoBox title="抓拍卡片示例">
        <Row style={{ padding: 20 }}>
          {Array.from(new Array(12)).map((_, index) => (
            <Col span={4} key={index}>
              <CaptureCard className="theme-capture-card" imgUrl={data1.faceUrl} deviceName={data1.devieName} captureTime={data1.captureTime} height={300} />
            </Col>
          ))}
        </Row>
      </InfoBox>
      <InfoBox title="抓拍卡片示例">
        <Row style={{ padding: 20 }}>
          {Array.from(new Array(12)).map((_, index) => (
            <Col span={4} key={index}>
              <CaptureCard className="theme-capture-card" imgUrl={data1.faceUrl} deviceName={data1.devieName} captureTime={data1.captureTime} height={300} />
            </Col>
          ))}
        </Row>
      </InfoBox>
    </ContentBox>
  );
}
