import React from "react";
import { Sortable as KendoSortable } from "@progress/kendo-react-sortable";
import { SortableProps } from "./SortableProps";

const Sortable: React.FC<SortableProps> = ({
  dataTestId,
  animation,
  className,
  data,
  disabledField,
  emptyItemUI,
  idField,
  itemUI,
  navigation,
  style,
  tabIndex,
  onDragEnd,
  onDragOver,
  onDragStart,
  onNavigate,
}) => (
  <div data-test-id={dataTestId}>
    <KendoSortable
      animation={animation}
      className={className}
      data={data}
      disabledField={disabledField}
      emptyItemUI={emptyItemUI}
      idField={idField}
      itemUI={itemUI}
      navigation={navigation}
      style={style}
      tabIndex={tabIndex}
      onDragEnd={onDragEnd}
      onDragOver={onDragOver}
      onDragStart={onDragStart}
      onNavigate={onNavigate}
    />
  </div>
);

export default Sortable;