import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState, useCallback } from 'react';
import { cn } from '../../../utils/cn.js';
import { menuItemTheme } from './MenuItem.theme.js';

/**
 * MenuItem - Shared base component for menu items used by Dropdown and ContextMenu.
 *
 * Handles visual layout, base styling, keyboard activation, and focus tracking.
 * Context-specific behavior (selection, checked state) is handled by consumers.
 */
const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);
    const theme = {
        ...menuItemTheme,
        ...themeOverrides,
    };
    const handleClick = useCallback(() => {
        if (disabled)
            return;
        onActivate === null || onActivate === void 0 ? void 0 : onActivate();
    }, [disabled, onActivate]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            handleClick();
        }
    }, [handleClick]);
    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
                        ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
});
MenuItem.displayName = "MenuItem";

export { MenuItem };
