// src/components/Sidebar/DepartmentQuickAccess.jsx
import React from 'react';

const DepartmentQuickAccess = ({ departments, onNavigateToDepartment }) => {
  return (
    <div className="mt-auto mb-4 flex-shrink-0">
      <p className="px-4 text-xs font-semibold text-blue-200 uppercase tracking-wider mb-2">
        Phòng ban
      </p>
      <div id="department-quick-access" className="space-y-1 break-words">
        {departments && departments.length > 0 ? ( // Kiểm tra departments có tồn tại và có phần tử không
          departments.map((dept) => (
            <a
              key={dept.id}
              href={`#departments-section?deptId=${dept.id}`}
              className="block px-4 py-1 text-xs text-blue-100 hover:text-white hover:bg-blue-700 hover:bg-opacity-20 rounded"
              onClick={(e) => {
                e.preventDefault();
                if (onNavigateToDepartment) {
                  onNavigateToDepartment(dept.id);
                }
              }}
            >
              {dept.name}
            </a>
          ))
        ) : (
          <p className="px-4 text-xs text-blue-200">Đang tải...</p> // Hoặc "Không có phòng ban."
        )}
      </div>
    </div>
  );
};

export default DepartmentQuickAccess;