import React from 'react'
import {Consent, ConsentEvent, ConsentActionType} from '@signatu/consent'
import { Theme, WithStyles, withStyles } from '@signatu/styles';

export interface ConsentStatusProps {
    type: ConsentActionType 
    consent?: ConsentEvent
    language: string
}

const styles = (theme: Theme) => ({
    root: {
    }, 
    status: {
        ...theme.typography.caption, 
        marginTop: "1em"
    }, 
})

class ConsentStatus extends React.Component<ConsentStatusProps & WithStyles> {

    render() {
        const { classes } = this.props
        return (
        <div className={classes.root} data-type="ConsentStatus">
            <div className={classes.status}>
                {Consent.actionText(this.props.consent, this.props.language, this.props.type)} &nbsp;
                {Consent.text(this.props.consent, this.props.language)}
            </div>
            {this.props.children}
        </div>
        )
    }
}

const styled = withStyles<ConsentStatusProps>(styles)(ConsentStatus)
export { styled as ConsentStatus }
