import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Collapse } from '../../Collapse';
import { ItemButton } from './ItemButton';
import { List } from './List';
import { useLogic } from './useLogic';
export const Item = (props) => {
    const { collapsedIn, item: [, value], } = props;
    const { active: externalActive, icon, items, text, component, ...componentProps } = value;
    const { handleClick, isOpen, selected, isGroupTitleItem } = useLogic(props);
    return (_jsxs("li", { children: [_jsx(ItemButton, { opened: isOpen, collapsedIn: collapsedIn, selected: selected, text: text, icon: icon, component: component, ...componentProps, onClick: handleClick, isGroupTitleItem: isGroupTitleItem }), items && (_jsx(Collapse, { in: isOpen, children: _jsx(List, { collapsedIn: collapsedIn, items: items }) }))] }));
};
