import React from "react";
import { ChipListProps } from "./ChipListProps";
import { ChipList as KendoChipList } from "@progress/kendo-react-buttons";

const ChipList: React.FC<ChipListProps> = ({
  dataTestId,
  ariaDescribedBy,
  ariaLabelledBy,
  chip,
  className,
  data,
  defaultData,
  defaultValue,
  dir,
  disabled,
  id,
  name,
  required,
  selection,
  size,
  style,
  tabIndex,
  textField,
  valid,
  validationMessage,
  validityStyles,
  value,
  valueField,
  onChange,
  onClick,
  onDataChange,
  onDoubleClick,
  onMouseDown,
  onMouseEnter,
  onMouseLeave,
  onMouseMove,
  onMouseOut,
  onMouseOver,
  onMouseUp,
}) => (
  <div data-test-id={dataTestId}>
    <KendoChipList
      ariaDescribedBy={ariaDescribedBy}
      ariaLabelledBy={ariaLabelledBy}
      chip={chip}
      className={className}
      data={data}
      defaultData={defaultData}
      defaultValue={defaultValue}
      dir={dir}
      disabled={disabled}
      id={id}
      name={name}
      required={required}
      selection={selection}
      size={size}
      style={style}
      tabIndex={tabIndex}
      textField={textField}
      valid={valid}
      validationMessage={validationMessage}
      validityStyles={validityStyles}
      value={value}
      valueField={valueField}
      onChange={onChange}
      onClick={onClick}
      onDataChange={onDataChange}
      onDoubleClick={onDoubleClick}
      onMouseDown={onMouseDown}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseMove={onMouseMove}
      onMouseOut={onMouseOut}
      onMouseOver={onMouseOver}
      onMouseUp={onMouseUp}
    />
  </div>
);

export default ChipList;