import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';

const Sidebar = ({ collapsed, toggleSidebar }) => {
    const router = useRouter();

    return (
        <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
            {/* <button className="toggle-btn" onClick={toggleSidebar}>
        Toggle Sidebar
      </button> */}
            <ul>
                <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
                    <a href="/vendor/dashboard">
                        <Image alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
                        <span>Dashboard</span>
                    </a>
                </li>
                <li className={router.pathname === "/vendor/orders" ? "active" : ""}>
                    <a href="#">
                        <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
                        <span>Orders</span>
                    </a>
                </li>
                <li className={router.pathname === "/vendor/activities" ? "active" : ""}>
                    <a href="#">
                        <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
                        <span>Activities</span>
                    </a>
                </li>
            </ul>
        </div>
    );
};

export default Sidebar;