text: import React from 'react';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  
  const Title = styled.div`
    font-size:1.1em;
    font-weight: bolder;
    ${props => props.theme.MessageTitle.Title.css}
  `;
  
  const Subtitle = styled.div`
    font-size:0.8em;
    font-weight: lighter;
    opacity:0.7;
    ${props => props.theme.MessageTitle.Subtitle.css}
  `;
  
  const TitleContainer = styled.div`
    padding: 0.6em;
  `;
  
  const StyledMessageTitle = styled.div`
    max-width: ${props => props.theme.Message.cardMaxWidth};
    ${props => props.theme.MessageTitle.css}
  `;
  
  export class MessageTitle extends React.Component {
    static propTypes = {
      subtitle: PropTypes.string,
      title: PropTypes.string
    };
  
    render() {
      const { title, subtitle } = this.props;
      return (
        <StyledMessageTitle>
          <TitleContainer>
            <Title>{title}</Title>
            <Subtitle>{subtitle}</Subtitle>
          </TitleContainer>
        </StyledMessageTitle>
      );
    }
  }
  
  export default MessageTitle;
  