import exit from "images/icons/exit.svg";

import { useState } from "react";

import { Button } from "components/shared/Button/Button";

export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
  const [active, setActive] = useState(false);
  const button = {
    icon: exit,
    active: "exit-control-btn",
    inactive: "exit-control-btn",
    type: "exit",
  };

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

  return (
    <button
      tabIndex={-1}
      onClick={handleClick}
      className="toolbar-button-area"
    >
      <Button isSidebarWide={isSidebarWide} button={button}></Button>
    </button>
  );
};
