import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import { T } from 'Framework/i18n';

import './Styles.scss';

class Price extends React.Component {
    render() {
        const { totalFormatted, invalidated } = this.props.calculation || {};
        const { title } = this.props;
        return (
            <Typography className="price">
                {title && <span className="price-title">{title}: </span>}
                <span className="price-value">
                    {invalidated
                        ? T('price.calculating')
                        : totalFormatted && !invalidated
                        ? totalFormatted
                        : ''}
                </span>
            </Typography>
        );
    }
}

Price.propTypes = {
    calculation: PropTypes.object,
    title: PropTypes.node,
};

export default Price;
