import React from 'react';
import { Button, makeStyles, Typography, Card, CardContent, } from '@material-ui/core';
import { Link } from 'react-router-dom';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    card: {
        background: theme.palette.primary.main,
        minWidth: props => props === null || props === void 0 ? void 0 : props.minWidth,
        minHeight: props => props === null || props === void 0 ? void 0 : props.minHeight,
    },
    subHeader: {
        marginTop: theme.spacing(3),
    },
    content: {
        color: theme.palette.getContrastText(theme.palette.primary.main),
    },
    header: {
        textAlign: 'center',
        marginTop: theme.spacing(2),
    },
    button: {
        marginTop: theme.spacing(8),
        display: 'flex',
        justifyContent: 'center',
    },
    largeDisplay: {
        fontSize: '4rem',
        color: theme.palette.getContrastText(theme.palette.primary.main),
    },
    message: {
        marginTop: theme.spacing(3),
    },
}));
export const PageStatus = props => {
    const classes = useStyles(props);
    const { title, subheader, message, to, buttonLabel, statusCode, showButton = true, } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement(Card, { className: classes.card }, React.createElement(CardContent, null, React.createElement("div", { className: classes.content }, React.createElement("div", { className: classes.header }, statusCode && (React.createElement("div", null, React.createElement(Typography, { className: classes.largeDisplay }, statusCode))), React.createElement("div", { className: classes.subHeader }, React.createElement(Typography, { variant: "h6" }, title))), React.createElement("div", { className: classes.message }, React.createElement(Typography, { variant: "overline", style: { fontWeight: 700 } }, subheader), React.createElement("div", { style: { textAlign: 'left' } }, React.createElement(Typography, { variant: "caption" }, message))), showButton && (React.createElement("div", { className: classes.button }, React.createElement(Button, { component: Link, to: to, variant: "contained", color: "secondary", id: `udpRecord-PageStatus-${buttonLabel}`, udprecordid: `udpRecord-PageStatus-${buttonLabel}` }, buttonLabel))))))));
};
//# sourceMappingURL=PageStatus.js.map