import React from 'react';
import styled from '@emotion/styled';

import Container from './container';
import Page from './page';

import theme from '../theme';

const Header = styled.header`
  text-align: center;
  padding-top: ${theme.space[7]};
  padding-bottom: ${theme.space[7]};
`;

const Title = styled.h2`
  font-size: ${theme.fontsize[6]};
`;

const Text = styled.div`
  max-width: 710px;
  margin: 0 auto;
`;

const HomeSection = ({ title, text, children, ...props }) => (
  <Page as="section" {...props}>
    <Container>
      <Header>
        <Title>{title}</Title>
        {text && <Text>{text}</Text>}
      </Header>
      {children}
    </Container>
  </Page>
);

export default HomeSection;