import React from "react";
import { ChipProps } from "./ChipProps";
import { Chip as KendoChip } from "@progress/kendo-react-buttons";

const Chip: React.FC<ChipProps> = ({
  dataTestId,
  ariaDescribedBy,
  children,
  className,
  dataItem,
  dir,
  disabled,
  fillMode,
  icon,
  id,
  removable,
  removeIcon,
  removeSvgIcon,
  rounded,
  selected,
  selectedIcon,
  selectedSvgIcon,
  size,
  style,
  svgIcon,
  tabIndex,
  text,
  themeColor,
  value,
  onBlur,
  onClick,
  onDoubleClick,
  onFocus,
  onKeyDown,
  onMouseDown,
  onMouseEnter,
  onMouseLeave,
  onMouseMove,
  onMouseOut,
  onMouseOver,
  onMouseUp,
  onRemove,
}) => (
  <div data-test-id={dataTestId}>
    <KendoChip
      ariaDescribedBy={ariaDescribedBy}
      className={className}
      dataItem={dataItem}
      dir={dir}
      disabled={disabled}
      fillMode={fillMode}
      icon={icon}
      id={id}
      removable={removable}
      removeIcon={removeIcon}
      removeSvgIcon={removeSvgIcon}
      rounded={rounded}
      selected={selected}
      selectedIcon={selectedIcon}
      selectedSvgIcon={selectedSvgIcon}
      size={size}
      style={style}
      svgIcon={svgIcon}
      tabIndex={tabIndex}
      text={text}
      themeColor={themeColor}
      value={value}
      onBlur={onBlur}
      onClick={onClick}
      onDoubleClick={onDoubleClick}
      onFocus={onFocus}
      onKeyDown={onKeyDown}
      onMouseDown={onMouseDown}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseMove={onMouseMove}
      onMouseOut={onMouseOut}
      onMouseOver={onMouseOver}
      onMouseUp={onMouseUp}
      onRemove={onRemove}
    >
      {children}
    </KendoChip>
  </div>
);

export default Chip;