import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRefWithGeneric } from '../../forwardRefWithGeneric';
import { Tooltip } from '../../Tooltip';
import { Typography } from '../../Typography';
import { getInertProps } from '../../utils/getInertProps';
import { sidebarPopoverItemClassnames } from './constants';
import { IconWrapper, Item, ItemWrapper, Wrapper } from './styles';
import { useLogic } from './useLogic';
const SidebarPopoverItemInner = ({ icon, title, description, component, isDisabled, disabledReason, onClick, ...props }, ref) => {
    const Component = component ?? 'div';
    const { handleItemClick } = useLogic({ onClick });
    return (_jsx("li", { children: _jsx(Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: _jsx(Item, { onClick: handleItemClick, ...getInertProps(isDisabled), "$isDisabled": isDisabled, children: _jsx(Component, { ref: ref, ...props, className: sidebarPopoverItemClassnames.content, children: _jsxs(Wrapper, { "$hasDescription": Boolean(description), children: [icon && _jsx(IconWrapper, { children: icon }), _jsxs(ItemWrapper, { children: [_jsx(Typography, { variant: "subtitle1", children: title }), description && (_jsx(Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
};
export const SidebarPopoverItem = forwardRefWithGeneric(SidebarPopoverItemInner);
