import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Loader } from "..";
import { getInitials } from "../../utils";
import TextStyles from "./TextStyles";
import FontSizeControl from "./FontSizeControl";
import styles from "./ToolbarItem.module.scss";
const ToolbarItem = ({ editor, contributors, isLoading = false, }) => {
    return (_jsxs("div", { className: styles.textEditortToolBarContainer, children: [_jsx(TextStyles, { editor: editor }), _jsx("span", { children: _jsx(FontSizeControl, { editor: editor }) }), _jsxs("div", { children: [isLoading && _jsx(Loader, { width: "16", height: "16" }), contributors && !isLoading && (_jsxs(_Fragment, { children: [_jsx("p", { children: "Contributors: " }), contributors.map((contributor, index) => (_jsx("p", { children: getInitials(contributor) }, index)))] }))] })] }));
};
export default ToolbarItem;
