import { useState } from "react";
import { Button } from "../button/button";
import control from "../../../images/icons/control.svg";
import { THOC } from "../../../utils/types";


export const ControlButton: React.FC<THOC> = ({ onClick }) => {
  const [active, setActive] = useState(false);
  const button = {
    icon: control,
    active: "request-control-btn",
    inactive: "request-control-btn-disable",
    type: "control",
  };

  function handleClick() {
    onClick()
    setActive(prev => !prev)
  }

  return <div className="toolbar-button-area">
    <Button button={button} active={active} onClick={handleClick}></Button>
  </div>
};
