import React from 'react';
import { makeStyles } from '@material-ui/core';
const AlertTypeEnum = {
    default: {
        backgroundColor: 'none'
    },
    success: {
        backgroundColor: '#F3FAF3'
    },
    error: {
        backgroundColor: '#FDF7F6'
    }
};
const useStyles = makeStyles((theme) => ({
    rootContainer: {
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        gap: theme.spacing(1.25),
        width: (props) => ((props === null || props === void 0 ? void 0 : props.width) ? props === null || props === void 0 ? void 0 : props.width : '100%'),
        height: (props) => ((props === null || props === void 0 ? void 0 : props.height) ? props === null || props === void 0 ? void 0 : props.height : '77px'),
        backgroundColor: (props) => {
            var _a, _b;
            return ((_b = AlertTypeEnum[(_a = props === null || props === void 0 ? void 0 : props.alertType) === null || _a === void 0 ? void 0 : _a.toLowerCase()]) === null || _b === void 0 ? void 0 : _b.backgroundColor) ||
                theme.palette.background.paper;
        },
        borderWidth: '0px 1px',
        borderStyle: 'solid',
        borderColor: 'rgba(0, 0, 0, 0.12)'
    },
    textContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '0px'
    }
}));
/**
 * `FlagBlock` component
 */
export const FlagBlock = (props) => {
    const { children, style } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: classes.rootContainer, style: style }, React.createElement("div", { className: classes.textContainer }, children)));
};
//# sourceMappingURL=FlagBlock.js.map