import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { useState } from 'react';
import Avatar from '../Avatar';
import Icon from '../Icon';
import Tag from '../Tag';
import './styles.scss';
export default function DropdownItemList({ item, onClick = () => { } }) {
    const [hover, setHover] = useState(false);
    const getClassNames = cx('ds-dropdown-itemlist', item.className, {
        disabled: item.disabled,
    });
    return (_jsxs("div", { className: getClassNames, onClick: (e) => {
            e.stopPropagation();
            onClick();
        }, onMouseOver: () => setHover(true), onMouseOut: () => setHover(false), children: [item.icon && (_jsx(Icon, { name: item.icon, size: "x-small", disabled: item.disabled })), item.tag && (_jsx(Tag, { text: item.tag, color: "gray", type: hover ? 'accent' : 'low', size: "small", disabled: item.disabled })), item.image && _jsx(Avatar, { src: item.image, size: "x-small" }), _jsx("span", { className: "label", children: item.label }), item.sublabel && _jsx("span", { className: "sublabel", children: item.sublabel })] }));
}
