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

const NavLinks = ({ navItems, activeSection, onNavigate }) => {
  return (
    <nav className="flex-1 space-y-2">
      {navItems.map((item) => (
        <a
          key={item.id}
          href={`#${item.id}`} // Sẽ thay đổi khi dùng React Router
          className={`sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg ${
            activeSection === item.id
              ? 'bg-blue-700 bg-opacity-50 text-white font-semibold' // Lớp active mạnh hơn chút
              : 'text-blue-100 hover:bg-blue-700 hover:bg-opacity-30'
          }`}
          onClick={(e) => {
            e.preventDefault(); // Ngăn hành vi mặc định của thẻ a
            onNavigate(item.id);
          }}
          data-target={item.id} // Giữ lại data-target nếu cần cho các logic khác tạm thời
        >
          <i className={`fas ${item.icon} mr-3 ${activeSection === item.id ? 'text-white' : 'text-blue-200'}`}></i>
          {item.label}
        </a>
      ))}
    </nav>
  );
};

export default NavLinks;