import React from 'react';
import Text from '@bufferapp/ui/Text';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Header = styled.div`
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }
`;

const Title = ({ children }) => (
  <Header>
    <Text type="h3">
      {children} 
    </Text>
  </Header>
);

Title.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Title;