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

import { CloneElementWithClassName } from "./CloneElementWithClassName";
import { Provider } from "./Context";

export interface BlockActionProps {
  /** 1 and only one single element */
  children: ReactElement;
  className?: string;
  /** Add border on hover */
  hasBorderOnHover?: boolean;
  [key: string]: any;
}

const BlockAction: React.FC<BlockActionProps> = (props) => {
  const { hasBorderOnHover, className, ...restProps } = props;

  return (
    <Provider hasBorderOnHover={hasBorderOnHover}>
      <CloneElementWithClassName
        {...restProps}
        className={cx("block-action", className, {
          "block-action--border-on-hover": hasBorderOnHover,
        })}
        data-block-action
      />
    </Provider>
  );
};

BlockAction.displayName = "BlockAction";

export { BlockAction };