import React__default from 'react';
import { FlexBox } from './FlexBox.mjs';
import styled from '../../../../../../node_modules/@mui/material/styles/styled.mjs';
import MenuItem from '../../../../../../node_modules/@mui/material/MenuItem/MenuItem.mjs';

const TextContainer = styled('div')({
    display: 'flex',
    flexDirection: 'column',
    textWrap: 'wrap'
});
const IconContainer = styled('div')(({ visible, theme })=>({
        display: 'flex',
        marginRight: theme.spacing(1),
        visibility: visible ? 'visible' : 'hidden'
    }));
const StyledMenuItem = styled(MenuItem)(({ theme })=>({
        display: 'flex',
        alignItems: 'center',
        padding: theme.spacing(1),
        flex: 1
    }));
const MenuItemCore = ({ Icon, disabled, forceSelected, label, onClick, selected, subtext, TypographyComponent: Typography })=>{
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        justifyContent: "space-between"
    }, /*#__PURE__*/ React__default.createElement(StyledMenuItem, {
        "data-value": label,
        disabled: disabled,
        onClick: onClick
    }, Icon && /*#__PURE__*/ React__default.createElement(IconContainer, {
        visible: selected || forceSelected
    }, Icon), /*#__PURE__*/ React__default.createElement(TextContainer, null, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, label), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "caption"
    }, subtext))));
};

export { MenuItemCore };
//# sourceMappingURL=MenuItem.mjs.map
