import React from 'react';
import { DragNDropList } from '../../../drag-and-drop-list';
import { TableSettingsItem } from './table-settings-item';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function TableSettingsGroup({
  groupId,
  groupName,
  columns,
  settings,
  tableContainerWidth,
  onItemMove,
  isReorderEnabled,
  handleKeyboardColumnsReorder,
  localizationText
}) {
  return /*#__PURE__*/_jsxs("div", {
    className: "settings-group-container",
    children: [/*#__PURE__*/_jsx("div", {
      className: "group-header uppercased",
      children: groupName
    }), /*#__PURE__*/_jsx("div", {
      className: "group-items",
      children: /*#__PURE__*/_jsx(DragNDropList, {
        data: columns,
        onDataChanged: onItemMove,
        dragItemType: groupId,
        canDrag: () => isReorderEnabled,
        ListItemComponent: TableSettingsItem,
        additionalListItemProps: {
          settings,
          tableContainerWidth,
          isReorderEnabled,
          handleKeyboardColumnsReorder,
          localizationText
        }
      })
    })]
  });
}