import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useState } from "react";

const Sidebar = () => {
  const router = useRouter();

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

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

  return (
    <div className={`sidebar ${collapsed ? "collapsed" : ""}`}>
      {/* <button className="toggle-btn" onClick={toggleSidebar}>
        Toggle Sidebar
      </button> */}
      <ul>
        {/* <li className={router.pathname === "/admin/orders" ? "active" : ""}>
                    <a href="/admin/orders">
                        <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
                        <span>Orders</span>
                    </a>
                </li> */}
        <li className={router.pathname === "/admin/activities" ? "active" : ""}>
          <Link prefetch href="/admin/activities">
            <div>
              <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
              <span>Activities</span>
            </div>
          </Link>
        </li>
        <li className={router.pathname === "/admin/vendors" ? "active" : ""}>
          <Link prefetch href="/admin/vendors">
            <div>
              <Image alt="" width={22} height={15} src="/images/admin/icon-user.svg" />
              <span>Vendor</span>
            </div>
          </Link>
        </li>
        <li className={router.pathname === "/admin/giftcards" ? "active" : ""}>
          <Link prefetch href="/admin/giftcards">
            <div>
              <Image alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
              <span>Gift Card</span>
            </div>
          </Link>
        </li>
        <li className={router.pathname === "/admin/reviews" ? "active" : ""}>
          <Link prefetch href="/admin/reviews">
            <div>
              <Image alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
              <span>Reviews</span>
            </div>
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Sidebar;