import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Typography } from 'antd';
import { Droppable } from 'react-beautiful-dnd';
import Item from './Item';
export default function DroppableArea({ pivotConfig, axis }) {
    return (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { strong: true, style: {
                    display: 'flex',
                    justifyContent: 'center',
                    padding: '8px 16px',
                    background: 'var(--light-5)',
                    borderBottom: '1px solid var(--light-color)',
                }, children: axis }), _jsx("div", { "data-testid": `pivot-popover-${axis}`, style: {
                    padding: '8px',
                }, children: _jsx(Droppable, { droppableId: axis, children: (provided) => (_jsxs("div", { ref: provided.innerRef, ...provided.droppableProps, style: {
                            display: 'grid',
                            gridTemplateColumns: 'minmax(0, 1fr)',
                            gap: '8px',
                            height: '100%',
                            minHeight: '32px',
                        }, children: [pivotConfig[axis].map((id, index) => (_jsx(Item, { id: id, index: index }, id))), provided.placeholder] })) }) })] }));
}
//# sourceMappingURL=DroppableArea.js.map