import { PanelLeft } from "lucide-react";
import { observer } from "mobx-react";
// hooks
import { useAppTheme } from "@/hooks/store/use-app-theme";
import { isSidebarToggleVisible } from "@/buzzwareTech-web/components/desktop";
import { IconButton } from "@buzzwaretech/propel/icon-button";

export const AppSidebarToggleButton = observer(
  function AppSidebarToggleButton() {
    // store hooks
    const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();

    if (!isSidebarToggleVisible()) return null;
    return (
      <IconButton
        size="base"
        variant="ghost"
        icon={PanelLeft}
        onClick={() => {
          if (sidebarPeek) toggleSidebarPeek(false);
          toggleSidebar();
        }}
      />
    );
  },
);