import wideButton from "./Menu.svg";

import { useState } from "react";
import { useTranslation } from "react-i18next";

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

export const WideSidebarButton: React.FC<any> = ({ close, isSidebarWide }) => {
  const { t } = useTranslation();
  const [active, setActive] = useState(false);
  const [button, setButton] = useState({
    icon: wideButton,
    inactive: "sidebar-hide",
    active: "sidebar-hide",
    type: "fullscreen",
    noHover: true,
  });

  const handleClick = () => {
    close();
    setActive((prev) => !prev);
  };

  return (
    <button
      tabIndex={-1}
      onFocus={(e) => e.target.blur()}
      onClick={handleClick}
      className="toolbar-button-area"
    >
      <Button
        isSidebarWide={isSidebarWide}
        button={button}
        active={active}
      ></Button>
    </button>
  );
};