import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
    {
        root: {
            textAlign: 'right',
        },
        MuiTypographyRoot: {
            lineHeight: 1.8,
        },
    },
    { name: 'TotalPrice' }
);

export const TotalPrice = ({ totalPrice, taxNote, showTopDivider }) => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            {showTopDivider && <Divider />}
            <Typography
                variant="h6"
                classes={{
                    h6: classes.MuiTypographyRoot,
                }}
            >
                <b>{totalPrice}</b>
            </Typography>
            {taxNote && (
                <Typography variant="caption" gutterBottom>
                    <i>{taxNote}</i>
                </Typography>
            )}
        </div>
    );
};

TotalPrice.propTypes = {
    totalPrice: PropTypes.node,
    taxNote: PropTypes.node,
    showTopDivider: PropTypes.bool,
};

TotalPrice.defaultProps = {
    showTopDivider: true,
};
