import React from "react";
import styled from "styled-components";
import { Row, Col } from "antd";
import { config } from "./config";

const Box = styled(Row)`
  width: 100%;
  height: 57px;
  background: #fafafa;
  font-size: 16px;
  font-family: MicrosoftYaHeiSemibold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
`;

const FlexBox = ({ children }) => (
  <Box type="flex" justify="space-around" align="middle">
    {children}
  </Box>
);

export default () => (
  <FlexBox>
    {config.map((i) => (
      <Col span={i[0]}>{i[1]}</Col>
    ))}
  </FlexBox>
);
