import React from "react";
import styled from 'styled-components';

const Divider = styled.div`
    height:1px;
    border-top:1px solid #FAFAFA;
    flex-grow:1;
`;
const Title = styled.div`
    font-size:18px;
    font-family:MicrosoftYaHeiSemibold;
    color:rgba(51,51,51,1);
    margin-right:20px;
`;
const IconBox = styled.div`
    width:28px;
    height:24px;
    margin-right:5px;
    display:flex;
    justify-content:start;
    align-items:center;
`;
const Header = styled.div`
    display:flex;
    margin:10px auto;
    align-items:center;
`;
const Box = styled.div`
    margin-top:40px;
    margin-bottom:40px;
`;

export default ({ icon, title, children }) => {
    return <Box>
        <Header>
            <IconBox>{icon}</IconBox>
            <Title>{title}</Title>
            <Divider/>
        </Header>
        {children}
    </Box>;
};