import { Col, Row, Card } from 'antd';
import { AutoCenter, Image } from 'antd-mobile';
import React from 'react';
import './index.less';
import { useBaseGrid } from './useBaseGrid';
interface BaseGridProps {
  config: Array<any>;
  link: string;
}
const BaseGrid: React.FC<BaseGridProps> = ({ config, link }) => {
  const {
    gotoPage
  } = useBaseGrid(link)
  return (
    <Row>
      {config?.map((item:any, index) => {
        return (
          <Col span={12} key={index}>
            <Card
              onClick={() => gotoPage(item.link)}
              className={"manbiankuang"}
              cover={
                <AutoCenter>
                  <div
                    style={{
                      display: 'inline-block',
                      marginTop: '15px',
                      marginBottom: '5px',
                    }}
                  >
                    <Image
                      src={require(`../../assets/icon/${item.link_icon}.png`)}
                      width={35}
                      fit="fill"
                    />
                  </div>
                </AutoCenter>
              }
            >
              <AutoCenter>
                <Card.Meta title={item.name} />
              </AutoCenter>
            </Card>
          </Col>
        );
      })}
    </Row>
  );
};
export default BaseGrid