import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const Sidebar = () => {
  const router = useRouter();

  const [collapsed, setCollapsed] = useState(false);

  const toggleSidebar = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div className={`sidebar ${collapsed ? "collapsed" : ""}`}>
      <ToastContainer position="bottom-right"></ToastContainer>

      {/* <button className="toggle-btn" onClick={toggleSidebar}>
        Toggle Sidebar
      </button> */}
      <ul>
        <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
          <span className="d-flex">
            <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
            <div className="mx-2 text-center">
              <Link href="/vendor/dashboard">Dashboard</Link>
            </div>
          </span>
        </li>
        <li className={router.pathname === "/vendor/enquiries" ? "active" : ""}>
          <span className="d-flex">
            <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
            <div className="mx-2 text-center">
              <Link href="/vendor/enquiries">Enquiries</Link>
            </div>
          </span>
        </li>
        <li className={router.pathname === "/vendor/activities" ? "active" : ""}>
          <span className="d-flex">
            <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
            <div className="mx-2 text-center">
              <Link href="/vendor/activities">Activities</Link>
            </div>
          </span>
        </li>
      </ul>
    </div>
  );
};

export default Sidebar;