// src/components/Layout/Sidebar.js
import React from "react";
import { NavLink } from "react-router-dom";
import {
  FaTachometerAlt,
  FaWallet,
  FaBook,
  FaShoppingCart,
  FaUniversity,
  FaCog,
  FaBackspace
} from "react-icons/fa";

const Sidebar = () => {
  const menuItems = [
    { path: "/academy", label: "داشبورد", icon: <FaTachometerAlt /> },
    { path: "/payments", label: "مدیریت پرداخت‌ها", icon: <FaWallet /> },
    { path: "/courses", label: "مدیریت دوره‌ها", icon: <FaBook /> },
    { path: "/purchased", label: "دوره‌های خریداری شده", icon: <FaShoppingCart /> },
    { path: "/academies", label: "مدیریت آکادمی‌ها", icon: <FaUniversity /> },
    { path: "/settings", label: "تنظیمات", icon: <FaCog /> },
    { path: "/", label: "بازگشت", icon: <FaBackspace /> }
  ];

  return (
    <div className="w-64 bg-gray-900 text-white h-screen fixed right-0">
      <div className="p-4 text-center border-b border-gray-700">
        <h1 className="text-xl font-bold"> پنل مدیریت دوره‌ها</h1>
      </div>
      <nav className="mt-4">
        {menuItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) =>
              `flex items-center gap-3 px-4 py-3 hover:bg-gray-800 transition ${
                isActive ? "bg-gray-800 border-r-4 border-pink-500" : ""
              }`
            }
          >
            {item.icon}
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>
    </div>
  );
};

export default Sidebar;