import React from "react";
import { FloatingLabelProps } from "./FloatingLabelProps";
import { FloatingLabel as KendoFloatingLabel } from "@progress/kendo-react-labels";

const FloatingLabel: React.FC<FloatingLabelProps> = ({
  dataTestId,
  children,
  className,
  dir,
  editorDisabled,
  editorId,
  editorPlaceholder,
  editorValid,
  editorValue,
  id,
  label,
  labelClassName,
  optional,
  style,
}) => (
  <div data-test-id={dataTestId}>
    <KendoFloatingLabel
      className={className}
      dir={dir}
      editorDisabled={editorDisabled}
      editorId={editorId}
      editorPlaceholder={editorPlaceholder}
      editorValid={editorValid}
      editorValue={editorValue}
      id={id}
      label={label}
      labelClassName={labelClassName}
      optional={optional}
      style={style}
    >
      {children}
    </KendoFloatingLabel>
  </div>
);

export default FloatingLabel;