import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography, Radio } from 'antd';
import { Draggable } from 'react-beautiful-dnd';
import { DragOutlined } from '@ant-design/icons';
export default function DraggableItem({ id, index, order = 'none', children, onOrderChange, }) {
    return (_jsx(Draggable, { draggableId: id, index: index, children: ({ draggableProps, dragHandleProps, innerRef }) => (_jsxs("div", { "data-testid": "order-item", ref: innerRef, ...draggableProps, ...dragHandleProps, style: {
                display: 'flex',
                flexWrap: 'nowrap',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 8,
                ...draggableProps.style,
            }, children: [_jsx(DragOutlined, {}), _jsx(Typography.Text, { ellipsis: true, style: {
                        margin: '0 auto 0 8px',
                        padding: '5px 0',
                    }, children: children }), _jsxs(Radio.Group, { onChange: (e) => onOrderChange(id, e.target.value), defaultValue: order, size: "small", style: { marginLeft: '8px' }, children: [_jsx(Radio.Button, { value: "asc", children: "ASC" }), _jsx(Radio.Button, { value: "desc", children: "DESC" }), _jsx(Radio.Button, { value: "none", children: "NONE" })] })] })) }));
}
//# sourceMappingURL=DraggableItem.js.map