import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => {
    var _a, _b, _c, _d;
    return ({
        root: {
            width: 0,
            height: 0,
            borderTop: '0px solid transparent',
            borderRight: `45px solid ${(_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.main}`,
            borderBottom: '45px solid transparent'
        },
        number: {
            marginLeft: theme.spacing(3.5),
            paddingTop: theme.spacing(0.5),
            color: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.white
        }
    });
});
export const NotificationElement = ({ alertNumber }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.number }, React.createElement(Typography, null, " ", alertNumber, " "))));
};
NotificationElement.propTypes = {
    /**
     * number of alert items
     */
    alertNumber: PropTypes.number.isRequired
};
//# sourceMappingURL=NotificationElement.js.map