"use client";

import cx from "classnames";
import type { ReactElement } from "react";
import React, { useContext } from "react";
import { CloneElementWithClassName } from "./CloneElementWithClassName";
import { Context } from "./Context";

export interface BlockActionIndicatorProps {
  /** 1 and only one single element */
  children: ReactElement;
  className?: string;
  [key: string]: any;
}

const BlockActionIndicator: React.FC<BlockActionIndicatorProps> = (props) => {
  const { isActive, isIndicating } = useContext(Context);

  return (
    <CloneElementWithClassName
      {...props}
      className={cx("block-action__indicator", props.className, {
        "is-indicating": isIndicating,
        "is-active": isActive,
      })}
    />
  );
};

BlockActionIndicator.displayName = "BlockActionIndicator";

export { BlockActionIndicator };