// src/components/sidebar/Sidebar.tsx

import { NavLink } from "react-router-dom";
import {
  LayoutDashboard,
  ClipboardList,
  Settings,
  Menu,
  Globe,
} from "lucide-react";

type SidebarProps = {
  isOpen: boolean;
  setIsOpen: (value: boolean) => void;
};

const menuItems = [
  {
    name: "Dashboard",
    path: "/",
    icon: <LayoutDashboard size={22} />,
  },

  {
    name: "Master Barang",
    path: "/master-data",
    icon: <ClipboardList size={22} />,
  },

  {
    name: "Settings",
    path: "/settings",
    icon: <Settings size={22} />,
  },

  {
    name: "Bahasa",
    path: "/bahasa",
    icon: <Globe size={22} />,
  },

  {
    name: "transaksiBAST",
    path: "/transaksiBAST",
    icon: <ClipboardList size={22} />,
  },
];

export default function Sidebar({
  isOpen,
  setIsOpen,
}: SidebarProps) {
  return (
    <aside
      className={`fixed top-0 left-0 h-screen bg-black text-white shadow-2xl transition-all duration-300 z-50
      ${isOpen ? "w-64" : "w-20"}`}
    >
      {/* HEADER */}
      <div className="h-24 px-4 border-b border-gray-800 flex items-center justify-between">
        {isOpen && (
          <div>
            <h1 className="text-3xl font-bold text-blue-500 leading-none">
              SCHOOL
              <br />
              LOAN
            </h1>

            <p className="text-sm text-gray-400 mt-2">
              Sistem Peminjaman
            </p>
          </div>
        )}

        {/* TOGGLE */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="bg-blue-600 hover:bg-blue-700 transition p-3 rounded-2xl"
        >
          <Menu size={22} />
        </button>
      </div>

      {/* MENU */}
      <nav className="mt-6 px-4 space-y-3">
        {menuItems.map((item, index) => (
          <NavLink
            key={index}
            to={item.path}
            className={({ isActive }) =>
              `flex items-center ${
                isOpen ? "justify-start" : "justify-center"
              } gap-4 px-5 py-4 rounded-2xl transition-all duration-200 ${
                isActive
                  ? "bg-blue-600 text-white shadow-lg"
                  : "text-gray-300 hover:bg-gray-900 hover:text-white"
              }`
            }
          >
            {item.icon}

            {isOpen && (
              <span className="text-lg font-medium">
                {item.name}
              </span>
            )}
          </NavLink>
        ))}
      </nav>

      {/* FOOTER */}
      {isOpen && (
        <div className="absolute bottom-5 left-5 text-sm text-gray-500">
          © 2026 School Loan
        </div>
      )}
    </aside>
  );
}