// Modules
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// Data
import styleData from '../../../data/styles';

const SupplementaryTitle = styled.span`
    display: block;
    text-align: right;
`

const Title = (props) => {
    const HeadingLevel = props.headingLevel ? props.headingLevel : 'h2';
    const StyledHeading = styled(HeadingLevel)`
        margin: 0;
        font-weight: ${styleData['typography_settings']['title'][props.typographySize]['weight']};
        font-size: ${styleData['typography_settings']['title'][props.typographySize]['size']};
        font-family: ${styleData['typography_settings']['title'][props.typographySize]['font']};
        line-height: ${styleData['typography_settings']['title'][props.typographySize]['line_height']};
    `

    const hasSupplementaryTitle = props.supplementaryTitle;

    if (hasSupplementaryTitle) {
        return (
            <StyledHeading>
                {props.children}
                <SupplementaryTitle>{props.supplementaryTitle}</SupplementaryTitle>
            </StyledHeading>
        )
    }

    return (
        <StyledHeading>{props.children}</StyledHeading>
    )
}

Title.propTypes = {
    children: PropTypes.string.isRequired,
    headingLevel: PropTypes.string,
    typographySize: PropTypes.oneOf([
        'small', 'medium', 'large'
    ]).isRequired,
    supplementaryTitle: PropTypes.string,
}

export default Title;

const Heading = styled.h2`
    margin: 0;
    ...lots of css...
`;

const Title = (props) => {
    const StyledHeading = Heading.withComponent(props.headingLevel || "h2");
    ...
};

font-weight: ${styleData['typography_settings']['title'][props.typographySize]['weight']};

if (props.supplementaryTitle) {