import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import cx from 'classnames';
import Icon from '../icon';
import { InlineLoading } from '../loading/InlineLoading';
function SelectOption(_a) {
    var value = _a.value, active = _a.active, selected = _a.selected, onSelect = _a.onSelect, index = _a.index, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, multiple = _a.multiple, children = _a.children, loading = _a.loading;
    return (_jsx("div", __assign({ className: cx('zent-select-v2-option', {
            'zent-select-v2-option-active': active,
            'zent-select-v2-option-selected': !multiple && selected,
            'zent-select-v2-option-selected-bold': multiple && selected,
            'zent-select-v2-option-disabled': value.disabled,
            'zent-select-v2-option-header': value.type === 'header',
        }), onClick: function (e) {
            e.preventDefault();
            onSelect(value);
        }, onMouseEnter: function () { return !value.type && onMouseEnter(index); }, onMouseLeave: function () { return !value.type && onMouseLeave(index); }, title: typeof value.text === 'string' ? value.text : '', "data-zv": 'v10.0.11' }, { children: _jsxs("div", __assign({ className: "zent-select-v2-option-text", "data-zv": 'v10.0.11' }, { children: [_jsx("p", __assign({ className: "zent-select-v2-option-text-content", "data-zv": 'v10.0.11' }, { children: children }), void 0), multiple && selected && (_jsx(Icon, { className: "zent-select-v2-option-selected-multiple", type: "check" }, void 0)), loading && (_jsx(InlineLoading, { loading: true, icon: "circle", iconSize: 18, className: "zent-select-v2-option-loading" }, void 0))] }), void 0) }), void 0));
}
export default memo(SelectOption);
