import React from "react";
import { FloatingActionButtonProps } from "./FloatingActionButtonProps";
import { FloatingActionButton as KendoFloatingActionButton } from "@progress/kendo-react-buttons";

const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
  dataTestId,
  accessKey,
  align,
  alignOffset,
  className,
  dir,
  disabled,
  icon,
  iconClass,
  id,
  item,
  items,
  modal,
  overlayStyle,
  popupSettings,
  positionMode,
  rounded,
  size,
  style,
  svgIcon,
  tabIndex,
  text,
  themeColor,
  onBlur,
  onClick,
  onClose,
  onFocus,
  onItemClick,
  onKeyDown,
  onOpen,
}) => (
  <div data-test-id={dataTestId}>
    <KendoFloatingActionButton
      accessKey={accessKey}
      align={align}
      alignOffset={alignOffset}
      className={className}
      dir={dir}
      disabled={disabled}
      icon={icon}
      iconClass={iconClass}
      id={id}
      item={item}
      items={items}
      modal={modal}
      overlayStyle={overlayStyle}
      popupSettings={popupSettings}
      positionMode={positionMode}
      rounded={rounded}
      size={size}
      style={style}
      svgIcon={svgIcon}
      tabIndex={tabIndex}
      text={text}
      themeColor={themeColor}
      onBlur={onBlur}
      onClick={onClick}
      onClose={onClose}
      onFocus={onFocus}
      onItemClick={onItemClick}
      onKeyDown={onKeyDown}
      onOpen={onOpen}
    />
  </div>
);

export default FloatingActionButton;