import React from "react";
import { OrgChartProps } from "./OrgChartProps";
import { OrgChart as KendoOrgChart } from "@progress/kendo-react-orgchart";

const OrgChart: React.FC<OrgChartProps> = ({
  dataTestId,
  ariaLabel,
  avatarField,
  cardHeight,
  cardsColors,
  cardWidth,
  childrenField,
  className,
  data,
  expandField,
  groupField,
  groupSubtitleHeight,
  groupSubtitleRender,
  groupTitleHeight,
  groupTitleRender,
  hasChildrenField,
  height,
  id,
  idField,
  itemRender,
  navigatable,
  style,
  subtitleField,
  titleField,
  verticalLine,
  onExpandChange,
  onGroupAction,
  onItemAction,
  onItemContextMenu,
  onItemDoubleClick,
}) => {
  return (
    <div data-test-id={dataTestId}>
      <KendoOrgChart
        ariaLabel={ariaLabel}
        avatarField={avatarField}
        cardHeight={cardHeight}
        cardsColors={cardsColors}
        cardWidth={cardWidth}
        childrenField={childrenField}
        className={className}
        data={data}
        expandField={expandField}
        groupField={groupField}
        groupSubtitleHeight={groupSubtitleHeight}
        groupSubtitleRender={groupSubtitleRender}
        groupTitleHeight={groupTitleHeight}
        groupTitleRender={groupTitleRender}
        hasChildrenField={hasChildrenField}
        height={height}
        id={id}
        idField={idField}
        itemRender={itemRender}
        navigatable={navigatable}
        style={style}
        subtitleField={subtitleField}
        titleField={titleField}
        verticalLine={verticalLine}
        onExpandChange={onExpandChange}
        onGroupAction={onGroupAction}
        onItemAction={onItemAction}
        onItemContextMenu={onItemContextMenu}
        onItemDoubleClick={onItemDoubleClick}
      />
    </div>
  );
};

export default OrgChart;