import React from 'react';

export interface ConsentTitleProps {
    title?: string | JSX.Element
    subtitle?: string | JSX.Element
}

import { Theme, WithStyles, withStyles } from '@signatu/styles';
const styles = (theme: Theme) => ({
    root: {
        fontFamily: theme.typography.fontFamily, 
        fontSize: theme.typography.fontSize, 
        fontWeight: theme.typography.fontWeight 
    }, 
    title: {
        ...theme.typography.title, 
        marginBottom: "1em"
    }, 
    subtitle: {
        ...theme.typography.subtitle, 
        color: theme.palette.text.light, 
        marginBottom: "1em"
    }

})

class ConsentTitle extends React.Component<ConsentTitleProps & WithStyles> {
    render() {
        const { classes, title, subtitle } = this.props
        return <div className={ classes.root } data-type="ConsentTitle">
            {title && <div className={classes.title}>{title}</div>}
            {subtitle && <div className={classes.subtitle}>{subtitle}</div>}
        </div>
    
    }
}

const styled = withStyles<ConsentTitleProps>(styles)(ConsentTitle)
export {styled as ConsentTitle}