import React from "react";
import { PivotGridProps } from "./PivotGridProps";
import { PivotGrid as KendoPivotGrid } from "@progress/kendo-react-pivotgrid";

const PivotGrid: React.FC<PivotGridProps> = ({
  dataTestId,
  cell,
  className,
  column,
  columnAxes,
  columnHeadersCell,
  columnHeadersColumn,
  columnHeadersRow,
  columns,
  data,
  dataColumn,
  dataRow,
  headerCell,
  id,
  navigatable,
  row,
  rowAxes,
  rowHeadersCell,
  rowHeadersColumn,
  rowHeadersRow,
  rows,
  style,
  tabIndex,
  onColumnAxesChange,
  onRowAxesChange,
}) => (
  <div data-test-id={dataTestId}>
    <KendoPivotGrid
      cell={cell}
      className={className}
      column={column}
      columnAxes={columnAxes}
      columnHeadersCell={columnHeadersCell}
      columnHeadersColumn={columnHeadersColumn}
      columnHeadersRow={columnHeadersRow}
      columns={columns}
      data={data}
      dataColumn={dataColumn}
      dataRow={dataRow}
      headerCell={headerCell}
      id={id}
      navigatable={navigatable}
      row={row}
      rowAxes={rowAxes}
      rowHeadersCell={rowHeadersCell}
      rowHeadersColumn={rowHeadersColumn}
      rowHeadersRow={rowHeadersRow}
      rows={rows}
      style={style}
      tabIndex={tabIndex}
      onColumnAxesChange={onColumnAxesChange}
      onRowAxesChange={onRowAxesChange}
    />
  </div>
);

export default PivotGrid;