import cx from "classnames";
import type { ReactElement } from "react";
import React from "react";

interface CloneElementWithClassNameProps {
  className?: string;
  children: ReactElement<any>;
  [key: string]: any;
}

const CloneElementWithClassName: React.FC<CloneElementWithClassNameProps> = ({
  className,
  children,
  ...other
}) =>
  React.cloneElement(children, {
    ...(typeof children.props === "object" && children.props !== null
      ? children.props
      : {}),
    ...other,
    className: cx(children.props && children.props.className, className),
  });

export { CloneElementWithClassName };