import React from 'react';
import { makeStyles } from '@material-ui/core';
import { ChipAlphabet } from '../../ChipAlphabet';
import { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon';
import { FlagIcon } from '@fluentui/react-icons';
const useStyles = makeStyles(theme => ({
    flagIcon: {
        marginRight: theme.spacing(2),
    },
    chipContainer: {
        marginBottom: theme.spacing(-1),
        '& > *': {
            marginRight: theme.spacing(1),
            marginBottom: theme.spacing(1),
        },
    },
}));
function flagLetter(str) {
    return str.charAt(0).toUpperCase();
}
export const EntityHeaderFlags = ({ data = [], color = 'primary' }) => {
    const classes = useStyles();
    if (!data && data.length === 0) {
        return;
    }
    return (React.createElement(React.Fragment, null, React.createElement(FluentIcon, { size: "small", component: FlagIcon, className: classes.flagIcon }), React.createElement("div", { className: classes.chipContainer }, data.map(item => {
        return (React.createElement(ChipAlphabet, { avatar: true, avatarCharacter: flagLetter(item.label), label: item.label, handleClick: () => item.handleClick }));
    }))));
};
//# sourceMappingURL=EntityHeaderFlags.js.map