import { jsx as _jsx } from "react/jsx-runtime";
import { Tooltip } from '@mui/material';
import cx from 'classnames';
import { createElement } from 'react';
import './styles.scss';
export const TagTypesValues = ['low', 'accent'];
export const TagSizesValues = ['large', 'medium', 'small'];
export const TagColorsValues = [
    'gray',
    'blue',
    'green',
    'red',
    'yellow',
    'violet',
];
export default function Tag({ text = '', title = '', className = '', disabled = false, color = 'gray', size = 'large', type = 'low', onClick, }) {
    const getClassNames = cx('ds-tag', className, type, size, color, {
        disabled: disabled,
    });
    if (title) {
        return (_jsx(Tooltip, { title: createElement('div', {
                dangerouslySetInnerHTML: { __html: title },
            }), placement: "top", arrow: true, children: (_jsx("div", { className: getClassNames, style: {
                    cursor: title ? 'pointer' : '',
                }, onClick: (e) => onClick && onClick(e), children: text })) }));
    }
    return (_jsx("div", { className: getClassNames, style: {
            cursor: title ? 'pointer' : '',
        }, onClick: (e) => onClick && onClick(e), children: text }));
}
