import React from 'react';
import { LayoutUnit } from '../layout/LayoutUnit';
import { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';
import { Typography, useTheme, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { useFluentIcon } from '../hooks/useFluentIcon';
const useStyles = makeStyles((theme) => ({
    labelRoot: {
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column'
    },
    labelText: {
        fontWeight: 'inherit',
        flexGrow: 1,
        lineHeight: '1.25rem'
    },
    iconContainer: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        marginTop: theme.spacing(0.5),
        width: theme.spacing(4),
        height: theme.spacing(4)
    },
    labelOverflow: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    },
    iconsContainer: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'center',
        gap: theme.spacing(0.75)
    }
}));
/**
 * `AlertFlag` component
 */
export const AlertFlag = (props) => {
    const { iconName = 'none', secondaryIconName = 'none', secondaryIconColor = '#008383', link = false, label, iconSize = 'medium', iconType = '', iconColor = '', variant = 'caption', style = {} } = props;
    const theme = useTheme();
    const classes = useStyles(props);
    const { icon: IconComponent } = useFluentIcon(iconName);
    const { icon: SubIconComponent } = useFluentIcon(secondaryIconName);
    return (React.createElement("div", { className: classes.labelRoot }, React.createElement("div", { className: classes.iconsContainer }, IconComponent && (React.createElement(UnityFluentIcon, { color: iconColor || theme.palette.primary.main, type: iconType, icon: IconComponent, customSize: true, size: iconSize, styles: Object.assign({ color: iconColor }, style) })), link && SubIconComponent && (React.createElement(UnityFluentIcon, { size: "small", color: secondaryIconColor, icon: SubIconComponent || '', style: {
            color: secondaryIconColor,
            marginTop: theme.spacing(0.4)
        } }))), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement(Typography, { variant: variant, className: clsx(classes.labelText, classes.labelOverflow), style: style }, label)));
};
//# sourceMappingURL=AlertFlag.js.map