import * as React from "react";
import { Sidebar, sidebarClasses } from "react-pro-sidebar";
import { PanelRightCloseIcon } from "lucide-react";

import { cn } from "../lib/utils";

interface SideBarProps {
  collapsed: boolean;
  setCollapsed: (arg0: boolean) => void;
  toggled: boolean;
  setToggled: (arg0: boolean) => void;
  children: React.ReactNode;
  className?: string;
}

export function SideBar({
  collapsed,
  setCollapsed,
  toggled,
  setToggled,
  children,
  className
}: SideBarProps) {
  return (
    <aside
      className={cn(
        "tw-figr-flex tw-figr-h-full tw-figr-flex-col tw-figr-bg-neutral-200",
        className
      )}
    >
      <div className="tw-figr-relative tw-figr-h-[90%] tw-figr-overflow-auto">
        <Sidebar
          collapsed={collapsed}
          onBackdropClick={() => setToggled(false)}
          toggled={toggled}
          breakPoint="md"
          rtl={false}
          rootStyles={{
            border: "none",
            [`.${sidebarClasses.container}`]: {
              backgroundColor: "var(--tw-figr-color-neutral-200)"
            }
          }}
        >
          {children}
        </Sidebar>
      </div>

      <footer className="tw-figr-hidden tw-figr-h-[10%] tw-figr-items-center tw-figr-border-t tw-figr-border-neutral-900/5 tw-figr-px-4 tw-figr-py-5 md:tw-figr-flex">
        <PanelRightCloseIcon
          className={cn(
            "tw-figr-z-[999] tw-figr-cursor-pointer tw-figr-text-3xl tw-figr-text-base-black",
            !collapsed && "tw-figr-rotate-180"
          )}
          onClick={() => {
            setCollapsed(!collapsed);
          }}
        />
      </footer>
    </aside>
  );
}