// assets/js/components/UserRow.js
const UserRow = ({ user, onEdit, onBlock, onUnblock }) => (
  <tr className="hover:bg-slate-700/50 transition">
    <td className="px-6 py-4 whitespace-nowrap">
      <div className="font-medium text-white">{user.name}</div>
    </td>
    <td className="px-6 py-4 whitespace-nowrap text-slate-300">{user.email}</td>
    <td className="px-6 py-4 whitespace-nowrap text-slate-300">{user.nrp}</td>
    <td className="px-6 py-4 whitespace-nowrap">
      <span
        className={`px-3 py-1 rounded-full text-xs font-semibold ${Helpers.getRoleBadgeClass(
          user.role
        )}`}
      >
        {user.role}
      </span>
    </td>
    <td className="px-6 py-4 whitespace-nowrap">
      <span
        className={`px-3 py-1 rounded-full text-xs font-semibold ${Helpers.getStatusBadgeClass(
          user.status || "active"
        )}`}
      >
        {user.status || "active"}
      </span>
    </td>
    <td className="px-6 py-4 whitespace-nowrap">
      <div className="flex gap-2">
        <button
          onClick={() => onEdit(user)}
          className="px-3 py-1 bg-gradient-to-r from-yellow-600 to-yellow-700 text-white text-sm rounded hover:from-yellow-700 hover:to-yellow-800 transition shadow-lg"
        >
          Edit
        </button>
        {user.status === "active" || !user.status ? (
          <button
            onClick={() => onBlock(user.id)}
            className="px-3 py-1 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm rounded hover:from-red-700 hover:to-red-800 transition shadow-lg"
          >
            Block
          </button>
        ) : (
          <button
            onClick={() => onUnblock(user.id)}
            className="px-3 py-1 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm rounded hover:from-green-700 hover:to-green-800 transition shadow-lg"
          >
            Unblock
          </button>
        )}
      </div>
    </td>
  </tr>
);