import { Button } from '@/components/ui/formsButton';
import { Nav } from '@/components/ui/nav';
import routes from '@/routes/sideBar';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useEffect, useState } from 'react';
import { useWindowWidth } from '@react-hook/window-size';
function SideBar() {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const width = useWindowWidth();

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  useEffect(() => {
    if (width < 768) {
      setIsCollapsed(true);
    }
  }, [width]);

  return (
    <div
      className={`bg-secondary relative border-r px-3 pb-10 pt-24 ${
        !isCollapsed && 'md:min-w-[190px] min-w-[80px]'
      }`}
    >
      {width > 768 && (
        <div className="absolute right-[-18px] top-7">
          <Button
            onClick={toggleSidebar}
            variant="outline"
            className="rounded-full bg-white p-2 h-9 w-9"
          >
            {isCollapsed ? <ChevronRight /> : <ChevronLeft />}
          </Button>
        </div>
      )}
      <Nav isCollapsed={isCollapsed} routes={routes} />
    </div>
  );
}

export default SideBar;