import * as React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Text, ClickableCard } from '@wix/design-system';
import { CardActions } from './CardActions';
function _CardComponent({ originalItem, itemIndex, item, stageKey, actionCell, itemActionsState, isDragging, state, }) {
    const { title, subtitle, additionalInfo, badge } = item;
    return (React.createElement("div", { "data-hook": `kanban-card-container-${stageKey}-${item.key}`, style: {
            marginRight: '12px',
            marginLeft: '12px',
            overflow: 'visible',
            width: '246px',
            opacity: isDragging ? 0.8 : 1,
        } },
        React.createElement(ClickableCard, { hasPadding: false, skin: "shadow" },
            React.createElement(Box, { padding: "12px", dataHook: `kanban-card-${stageKey}-${item.key}`, direction: "vertical" },
                typeof title === 'string' ? (React.createElement(Box, { paddingBottom: "3px" },
                    React.createElement(Text, { dataHook: `kanban-card-title-${stageKey}-${item.key}`, size: "small", weight: "normal", ellipsis: true, maxLines: 2 }, title))) : (React.createElement(Box, { zIndex: 51, paddingBottom: "3px", dataHook: `kanban-card-title-${stageKey}-${item.key}` }, title)),
                React.createElement(Box, { direction: "vertical", gap: "1px" },
                    React.createElement(Box, null, badge),
                    React.createElement(Box, null, subtitle),
                    React.createElement(Box, null, additionalInfo)),
                React.createElement(Box, { align: "right", paddingTop: "6px" },
                    React.createElement(CardActions, { actionCell: actionCell, originalItem: originalItem, itemIndex: itemIndex, itemActionsState: itemActionsState, stageKey: stageKey, item: item, state: state }))))));
}
export const CardComponent = observer(_CardComponent);
//# sourceMappingURL=Card.js.map