/* eslint-disable no-irregular-whitespace */
import "./Sidebar.css";
import useSidebarTabStore from "../stores/useSidebarStore";
import SidebarTab1 from "./SidebarTab1";
import SidebarTab2 from "./SidebarTab2";
import SidebarTab3 from "./SidebarTab3";
import SidebarTab4 from "./SidebarTab4";
import SidebarTab5 from "./SidebarTab5";

interface SidebarProps {
  className?: string;
}

function Sidebar({ className }: SidebarProps) {
  const [currentTab] = useSidebarTabStore((state) => [state.currentTab]);

  return (
    <div
      className={[
        "sidebar fixed top-0 left-0 w-full h-full bg-[#14161F] bg-opacity-90 transition-opacity text-white",
        className,
      ].join(" ")}
    >
      <div className="absolute right-0 h-full sm:w-[408px] w-full bg-[#14161F] overflow-y-auto">
        {currentTab === 1 && <SidebarTab1 />}
        {currentTab === 2 && <SidebarTab2 />}
        {currentTab === 3 && <SidebarTab3 />}
        {currentTab === 4 && <SidebarTab4 />}
        {currentTab === 5 && <SidebarTab5 />}
      </div>
    </div>
  );
}

export default Sidebar;
