"use client";

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

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

const BlockActionControl: React.FC<BlockActionControlProps> = (props) => {
  const { isActive, setIsActive, setIsIndicating } = useContext(Context);
  return (
    <CloneElementWithClassName
      {...props}
      className="block-action__control"
      onMouseEnter={() => setIsIndicating(true)}
      onMouseLeave={() => setIsIndicating(false)}
      onFocus={() => setIsIndicating(true)}
      onBlur={() => setIsIndicating(false)}
      onClick={() => setIsActive(!isActive)}
    />
  );
};

BlockActionControl.displayName = "BlockActionControl";

export { BlockActionControl };