import React from 'react';
import { Box, Card, CardContent, LinearProgress, makeStyles, Typography } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {},
    paper: {
        width: '100%',
        height: '100%',
        position: 'relative'
    },
    styleWidth: {
        width: '75%'
    },
    media: {
        height: 120
    },
    cardContent: {
        paddingTop: 0
    },
    titleWrapper: {
        display: 'flex',
        backgroundColor: (props) => (props === null || props === void 0 ? void 0 : props.headerColor) || '#FFFFFF',
        alignItems: 'center'
    },
    loading: {
        position: 'absolute',
        top: 0,
        left: 0
    },
    expandMessage: {
        display: 'flex'
    },
    cardRoot: {
        '&:last-child': {
            paddingBottom: theme.spacing(10)
        }
    },
    title: {
        flex: 1
    },
    visualization: {
        display: 'flex',
        alignItems: 'flex-end',
        width: '100%',
        height: 300
    }
}));
export const PaymentCard = (props) => {
    const { title, className, style, loading, headerElement, children } = props;
    const classes = useStyles(props);
    return (React.createElement(Card, { className: className, style: Object.assign({ border: 'none', boxShadow: 'none', borderRadius: 0 }, style) }, title && (React.createElement(CardContent, { className: classes.titleWrapper, classes: { root: classes.cardRoot } }, React.createElement(Typography, { className: classes.title, component: "h2", variant: "h6" }, title), headerElement && headerElement)), loading && (
    // @ts-ignore
    React.createElement(Box, { sx: { width: '100%' } }, React.createElement(LinearProgress, null))), React.createElement(Box, { className: className }, children)));
};
//# sourceMappingURL=PaymentCard.js.map